是否有可能使 div 的高度达到可用区域的 100%？

发布于 2024-10-09 00:43:51 字数 462 浏览 1 评论 0原文

我的设计有一个左侧栏，右侧有主要内容。在网站上的大多数页面上，左侧边栏比内容井高，但对于少数页面，内容井非常高，并且侧边栏处于浮动状态，没有底部。

我创建了一个糟糕的例子来说明我在这里所说的内容：

http://www.pmind .com/staging/pisspoor.html

我记得几年前，答案是只分配一个可以伪造的背景图像，即在我的示例中，只需制作一个左侧有一个绿色条的图像，然后使其成为主要红色 div 的背景。我知道网站通常希望拥有跨越 100% 浏览器窗口的区域，因此您可以使 HTML 和 BODY 为 100%，但在这种情况下，该区域由页眉和页脚限制，因此浏览器的尺寸不是一个因素，我只是希望绿色 div 是它的父红色 div 的高度。对于 CSS2.1 及更低版本来说，这仍然是一个白日梦吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

韵柒 2024-10-16 00:43:51

您可以使用 Javascript 来完成这项工作，也可以在 CSS 中设置内容的最小高度：

#content {
min-height:500px;
}

You could use Javascript to do the job or you could set a min-height in CSS on the content:

#content {
min-height:500px;
}

回复收藏 0 原文

烈酒灼喉 2024-10-16 00:43:51

这是 div 定位的一个很好的例子。这是一个工作示例 http://jsbin.com/izosi3

<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;">
</div>
<div id="leftnav" style="position:absolute; top:50px; left:0px; bottom:50px; width:150px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:0px; bottom:0px; right:0px;">
</div>

Here is a good example of div positioning. Here is a working example http://jsbin.com/izosi3

<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;">
</div>
<div id="leftnav" style="position:absolute; top:50px; left:0px; bottom:50px; width:150px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:0px; bottom:0px; right:0px;">
</div>

回复收藏 0 原文

~没有更多了~