CSS - 使 div 消耗所有可用空间答案

【问题标题】：CSS - Making a div consume all available spaceCSS - 使 div 消耗所有可用空间
【发布时间】：2011-04-25 07:50:32
【问题描述】：

全部，

我有一个页面假设只占用浏览器中的可用屏幕空间。

我有一个“顶栏”和一个“底栏”，它们都固定在页面的顶部和底部。我想要一个 div 来消耗（占用）上述两个条之间的剩余空间。

中间的 div 不能被顶部和底部的条重叠。这完全可以用CSS还是我需要使用js。

另外，如果我确实使用 js，考虑到浏览器在 js 代码之前先加载 CSS，那么使用 js 进行中心定位如何解决上述问题？

非常感谢，

【问题讨论】：

标签： css html css-position

【解决方案1】：

您可以使用relative 和absolute 位置。这里举个例子：

css

   html,body,#wrapper {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        position:relative;
    }

    #top, #middle, #bottom {
        position:absolute;
    }

    #top {
        height:50px;
        width:100%;
        background:grey;
    }
    #middle {
        top:50px;
        bottom:50px;
        width:100%;
        background:black;
    }
    #bottom {
        bottom:0;
        height:50px;
        width:100%;
        background:grey;
    }

html

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

演示： http://jsfiddle.net/jz4rb/4

【讨论】：

【解决方案2】：

This demo 在 Chrome12 中适用于我，但 YMMV 取决于您需要支持的浏览器。例如position:fixed 在 IE6 中无法正常工作。

【讨论】：

【解决方案3】：

在body 标签上使用绝对定位。 position:absolute 顶部和底部为零将“拉伸”主体，使其与浏览器窗口的大小相同。或者，设置 height: 100% 也可以，但我记得它对某些旧浏览器很奇怪。

然后在中心 div 上使用绝对定位，并使用足够的顶部/底部偏移量来避开页眉和页脚栏。标题栏绝对定位为top，尾栏绝对定位为bottom。

注意：这不适用于移动浏览器。您需要使用 JS 获取窗口的高度并手动设置中心 div 的高度。

【讨论】：