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

Question

我有 2 个 div 容器，左侧有一个导航，右侧有一个内容：

#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;
}

现在我想将 leftnav 设置为与内容相同的高度（如果可能的话，不要使用假列）：

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

或者

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

似乎不起作用。

关于为什么会这样的任何建议吗？

Answer 1

它确实有效。请参阅此 jsfiddle。

您是否在 jQuery 就绪块中运行代码？此外，如果您想通过浏览器“缩放”中的文本大小更改来维持这种高度关系，则需要响应调整大小事件。如果在某些时候您将 content_dynamic div 的宽度设置为 auto，则当 content_dynamic div 的高度发生变化时，您还需要调整侧边栏 div 的大小（同样，通过响应调整大小事件）。

jQuery 只允许您附加到窗口级别的调整大小事件，但有一些插件可以轻松地将其转换为 div 级别调整大小事件。

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：（假设 jQuery 库已加载）

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

注意：与人造列或其他纯 CSS 方法相比，您无需担心缩放或调整大小，而且您的网站将适合关闭 JavaScript 的用户。

Answer 2

你必须明白你正在操纵 CSS 属性。

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

应该可以解决问题。

Answer 3

将显示块添加到 #leftnav_static

#leftnav_static
{
  display: block;
}

...这将起作用

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

请参阅我的示例； http://jsfiddle.net/D3gTy/