jQuery的 - 一个浮动的div设置动态等高

我有2个格容器，左边一个导航，一个内容的权利是：jQuery的 - 一个浮动的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());

不似乎工作。

对此有何建议？

来源

2011-08-26 mildev

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

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

应该这样做。

来源

2011-08-26 11:35:36 ty812

您可以在不设置CSS属性的情况下设置高度。可能有合理的理由将其设置为CSS属性，但我不认为*在这种情况下是必要的。有没有特别的理由这样做？ – mwolfetech

首先，它的工作原理，如果高度已经在CSS中设置，用CSS处理它似乎很自然......除此之外：当你没有设置html属性'height'时，我确信（并没有测试过）没有设置.height（）值。当没有设置什么东西时，你不能把它写入另一个.height（）（这仅仅是猜测）。 – ty812

如果在CSS中明确设置了高度，我不认为这很重要 - height（）仍然知道计算的高度 - 也就是说，至少在DOM准备就绪时。如果你的意思是在DOM准备好之前，以及如果你只是将JavaScript包含在html的头部分，那么它可能会有所不同。请参阅：http://jsfiddle.net/mwolfetech/FVeVv/1/ – mwolfetech

它确实有效。请参阅jsfiddle。

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

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关闭的人员工作。

来源

2011-08-26 11:45:47 mwolfetech

添加显示块#leftnav_static

#leftnav_static 
{ 
    display: block; 
}

...这将工作

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

见我的例子; http://jsfiddle.net/D3gTy/

来源

2011-08-26 11:51:18 Stefan

jQuery的 - 一个浮动的div设置动态等高

回答

相关问题