jquery - 设置浮动div的动态相等高度

Question

I have 2 div containers, one navigation on the left, one content right to that:

#leftnav_static
{
padding:5px;
margin-top: 5px;
margin-left: 5px;
height: 1000px;
width: 195px;
font-size: 1.35em;
float:left;
background-image: url('pagenav.jpg');
}

#content_dynamic
{
margin-top: 5px;
margin-left: 215px;
height: auto;
width: 700px;
padding: 5px;
background-image: url('pagenav.jpg');
font-size: 1em;
line-height:1.6em;
white-space:nowrap;
}

Now I want to set leftnav to the same height as content (no faux columns if possible):

$('#leftnav_static').height($("#content_dynamic").height());

or

$('#leftnav_static').innerHeight($("#content_dynamic").innerHeight());

dont seem to work.

any suggestions as to why that is?

Answer 1

It does work. See this jsfiddle .

Are you running the code in a jQuery ready block? Also, if you want to maintain this height relationship through text size changes from browser 'zooms', you will need to respond to resize events. If at some point you make your content_dynamic div have a width of auto, you will also need to resize the sidebar div when the height of the content_dynamic div changes (again, by responding to a resize event).

jQuery only allows you to attach to a resize event at the window level, but there are plugins that ease translating that to a div level resize event.

HTML:

 <div id="leftnav_static"></div>
 <div id="content_dynamic">Lorem ipsum dolor sit amet, 
   consectetur adipiscing elit. Etiam iaculis ornare 
   sapien sit amet condimentum. Aliquam a diam vel eros
   tristique fermentum vitae at turpis. Etiam fringilla,
   enim nec viverra interdum, metus tortor vehicula mauris,
   in luctus felis massa ut nulla. Proin et leo vel nunc ornare
   pulvinar. Vestibulum quis lectus  vel arcu tristique aliquet.
   Fusce malesuada nisi non ante egestas semper. 
  </div>

CSS:

#leftnav_static {
    padding:5px;
    margin-top: 5px;
    margin-left: 5px;
    height: 1000px;
    width: 195px;
    font-size: 1.35em;
    float:left;
    background-color: blue;
}

#content_dynamic {
    margin-top: 5px;
    margin-left: 215px;
    height: auto;
    width: 700px;
    padding: 5px;
    background-color: red;
    font-size: 1em;
    line-height:1.6em;
    //white-space:nowrap;  //This makes the content div only one line, 
                           //I commented this out to make the sizing clear.
 }

JavaScript : (Assuming that the jQuery library is already loaded)

$(function() {
    $('#leftnav_static').height($("#content_dynamic").height());
});

Note: The benefit of a faux columns or other pure CSS approaches is that you don't need to worry about zooming or resizes as much--and your site would work for people that have JavaScript turned off.

Answer 2

You have to understand that you are manipulating CSS attributes.

var myHeight = $("#content_dynamic").css("height");
$('#leftnav_static').css({"height": myHeight});

should do the trick.

Answer 3

Add display block to #leftnav_static

#leftnav_static
{
  display: block;
}

...and this will work

$(document).ready(function() {
    $('#leftnav_static').height( $('#content_dynamic').height() );
});

See my example; http://jsfiddle.net/D3gTy/