我有一个侧边栏 DIV，我想垂直扩展它以匹配其包含的 div。
我这样做是为了实现这个目标
html, body, #wrapper, #content, #sidebar{
height:100%;
}
但包装器、内容和侧边栏永远不会扩展到超过 1000 像素，即使内容是该值的几倍。
我相信这是因为内容#wrapper, #content是完全浮动的 DIV。
我尝试将空的 DIV 与clear:both作为最后一个元素#wrapper and #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>
注意：页脚位置固定
问题是你将 html、body 和 #wrapper 设置为 100%，这会强制它们的高度成为其父级的高度，#wrapper 的父级是 body，body 是 html，html 的父级是什么？我不确定，我猜测浏览器窗口（或其视口），如果是这样，那么#wrapper的高度将始终等于浏览器窗口的高度，所以如果您的浏览器窗口的高度是1000px，那么#wrapper的高度将始终为 1000px，并且由于您将 #sidebar 和 #content 设置为 100%，因此无论内部元素的高度如何，它们的高度也将始终为 1000px
如果我是对的，你应该做的是单独设置html的高度，将其他人的高度保持为100％，并将html的min-height设置为100％并保留高度。理论上，这将迫使 html 至少与浏览器窗口一样高，但当内部元素高于浏览器时会扩展，尽管我还没有测试过。
让我知道我是否正确。
Edit:
我测试过，有效。
只需这样做：
html,
body{
min-height: 100%;
}
不要设置高度，如果您希望考虑内部元素的高度，请确保清除浮动并且内部元素上没有绝对定位。现在，当没有足够的元素来推动它时，主体将占据浏览器窗口的整个视口，而当有足够的元素时，主体将扩展到页面的最底部，而不仅仅是浏览器窗口。
在 Chrome 中测试过，应该也可以在 Firefox 中使用
不知道ie。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
