我有一个侧边栏DIV,我想垂直扩展以匹配其包含div.
我这样做是为了实现这一目标
html,body,#wrapper,#content,#sidebar{
height:100%;
}
但是包装器,内容和侧边栏永远不会扩展到大约1000px,即使内容是内容的几倍.
我相信这是因为#wrapper,#content的内容完全是浮动的DIV.
我试图把空DIV放在一起清楚：作为#wrapper和#content中的最后一个元素,但无济于事.
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
....
<div class="clear"/>
</div>
<div class="clear"/>
</div>
</body>
注意：页脚是固定位置
解决方法
问题是你将100％设置为html,body和#wrapper,这会强制他们的身高成为父母的身高,#wrapper的父亲是身体,身体是html,什么是html的父母？我不确定,我猜测浏览器窗口(或其视口),如果是这样,那么#wrapper的高度将始终等于浏览器窗口的高度,所以如果你的浏览器窗口的高度是1000px,那么
#wrapper的高度总是1000px,因为你将100％设置为#sidebar和#content,它们的高度总是1000px,尽管内部元素的高度
#wrapper的高度总是1000px,因为你将100％设置为#sidebar和#content,它们的高度总是1000px,尽管内部元素的高度
如果我是对的,你应该做的是分别设置html的高度,将其他人的身高保持在100％,并将html的最小高度设置为100％并保持高度.从理论上讲,这将迫使html至少与浏览器窗口一样高,但是当内部元素高于浏览器时会扩展,但我还没有测试过.
如果我是对的,请告诉我.
编辑：
我测试了它,它的工作原理.
这样做：
html,body{
min-height: 100%;
}
如果您想要考虑内部元素的高度,请不要设置高度,并确保清除浮动并且不要在内部元素上进行绝对定位.现在,当没有足够的元素可以推动它时,正文将占据浏览器窗口的整个视图端口,当存在时,正文将扩展到页面的最底部,而不仅仅是浏览器窗口.
用chrome测试它,也应该在firefox中工作不知道ie.不,在第二次测试中,它没有成功似乎只有父母有一个给定的高度(例如身高：500px或身高：100％),身高：100％才有效;当父元素的min-height：100％且没有高度时,内部元素不能使用height：100％来匹配父元素.
