是否有可能得到一个div的高度是100％的可用面积？ [英] Is it possible to get a div's height to be 100% of an available area?

问题描述

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

I have a design that has a left side bar and a main content well on the right. On most pages on the site, the left sidebar is taller than the content well, but for a few pages, the content well is very tall and the sidebar is left floating with no bottom.

我在这里创建了一个很差的例子：

I have created a piss poor example of what I'm talking about here:

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

我记得多年前答案是只是分配一个背景图像，假装它，即在我的例子中，使一个图像下面有一个绿色的条，它的左边，使背景的主要红色div。我知道这是一个普遍的想要的网站有区域，可以跨越100％的浏览器窗口，所以你可以使HTML和BODY是100％，但在这种情况下，该区域的上限和页脚，所以浏览器的尺寸不是一个因素，我只是想让绿色div是它的父红色div的高度。

I remember years ago the answer was to just assign a background image that would fake it, i.e. in my example just make an image that had a green bar down the left side of it and make that the background to the main red div. And I know this is a common want for websites to have areas that span 100% of the browser window, so you can make HTML and BODY be 100%, but in this case, the area is capped by the header and footer so the browser's dimensions aren't a factor, I just want the green div to be the height of it's parent red div. Is this still a pipe dream with CSS2.1 and lower?

推荐答案

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

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>

这篇关于是否有可能得到一个div的高度是100％的可用面积？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！