换行时通过JavaScript更改DIV的高度

Question

I don't even know whether this is possible, however, I am hoping that JavaScript could provide a solution to this problem. I have a DIV, that shows the title for each page within a WordPress template that I am working on.

<div class="grid-block" id="page">

  <div id="page-info">

    <h3>#<?php is_home() ? bloginfo('description') : wp_title("",true); ?></h3>

  </div><!-- #page-info -->

</div><!-- .grid-block #page -->

The text that is called into the DIV comes in at various lengths, and sometimes over-exceeds the DIV. When the text exceeds the DIV, it wraps, just as it should, however, I am attempting to adjust the 'height' of this DIV, after a word is wrapped. I do not know if I could add some type of eventListener or something, however, pure HTML and/or CSS does not seem to have the components I need to solve this problem.

In addition, I understand that I 'could' use @media (media queries) to sort of emulate this effect, however, as far as I know, this can only be done in relation to the width of the Window, and I want the DIV to re-size 'only' when a string exceeds the width of this DIV. A demo of what I am attempting to do can be found at http://jsfiddle.net/justinbyrne001/SP3Q2/4/ . I appreciate any comments, recommendations, and advice that anyone has regarding this matter. Thanks in advance.

Answer 1

Do you need the fix height on #page-info? If you just use padding:10, the div#page-info would automatically wrap around the text.