我有一个侧边栏DIV,我想垂直扩展以匹配其包含div.
我这样做是为了实现这一目标
html, body, #wrapper, #content, #sidebar{
height:100%;
}
但是包装器,内容和侧边栏永远不会扩展到大约1000px,即使内容是内容的几倍.
我相信这是因为内容#wrapper,#content都是完全浮动的DIV.
我试图把空的div clear:both作为最后一个元素中#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,尽管内部元素的高度
如果我是对的,你应该做的是分别设置html的高度,保留其他'高度为100%,并将html的最小高度设置为100%并保持高度.从理论上讲,这将迫使html至少与浏览器窗口一样高,但是当内部元素高于浏览器时会扩展,尽管我还没有测试过.
如果我是对的,请告诉我.
编辑:
我测试了它,它的工作原理.这样做:
html,
body{
min-height: 100%;
}
如果您想要考虑内部元素的高度,请不要设置高度,并确保清除浮动并且不要在内部元素上进行绝对定位.现在,当没有足够的元素来推动它时,正文将占据浏览器窗口的整个视图端口,当存在时,正文将扩展到页面的最底部,而不仅仅是浏览器窗口.
在chrome中测试它应该在firefox中工作,
也不知道ie.
不,在第二次测试中,它没有工作
似乎只有当父母有一个给定的高度(例如身高:500px或身高:100%)时,身高:100%才有效; 当父元素的min-height:100%且没有高度时,内部元素不能使用height:100%来匹配父元素.