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 ready块中运行代码？此外，如果您希望通过浏览器“缩放”中的文本大小更改来维持此高度关系，则需要响应调整大小事件。如果在某些时候你使content_dynamic div的宽度为auto，那么当content_dynamic div的高度发生变化时，你还需要调整侧边栏div的大小（再次，通过响应resize事件）

jQuery只允许您在窗口级别附加到resize事件，但有些插件可以轻松将其转换为div级别resize事件。

<强> 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/

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

3 个答案: