Question

我的设计右侧有左侧栏和主要内容。在网站的大多数页面上，左侧边栏比内容更高，但是对于几页，内容很好，侧边栏是浮动的，没有底部。

我在这里创造了一个糟糕的可怜的例子：

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

我记得很久以前答案只是分配一个会伪造它的背景图像，即在我的例子中只是制作一个在其左侧有一个绿色条的图像，并将其作为主要红色div的背景。我知道这是一个常见的想要网站的区域跨越100％的浏览器窗口，所以你可以使HTML和BODY 100％，但在这种情况下，该区域受页眉和页脚的限制，所以浏览器的尺寸不是一个因素，我只想让绿色div成为它的父红色div的高度。这仍然是CSS2.1及更低版本的梦想吗？

Answer 1

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

#content {
min-height:500px;
}

Answer 2

这是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>

是否可以将div的高度设置为可用区域的100％？

2 个答案: