html - 如何设置div的高度以匹配剩余高度

Question

我有一个 HTML 页面，分为 4 个部分。

1. 标题
2. 菜单
3. 内容
4. 页脚

我为每个部分使用 1 个 div，并使用 1 个包含所有 4 个 div 的 div。

我的页眉高度是 50px，菜单高度是 50px，页脚高度是 20px。

然后我尝试将菜单的高度设置为 100%。菜单 div 正在占用其容器的高度，这在我的页面中创建了滚动条。

CSS如下:

html, body {
    margin: 0px;
    height: 100%;
    width: 100%;
    min-width: 1024px;
    min-height: 500px;
}

#container {
    width: 100%;
    height: 100%;
}

#header {
    width: 100%;
    height: 50px;
}

#menu {
    width: 100%;
    height: 50px;
}

#content {
    width: 100%;
    height: 100%;
}

#footer {
    width: 100%;
    height: 20px;
}

是否可以单独使用 CSS 还是我还必须使用 JavaScript？

Answer 1

这是另一个纯 CSS 解决方案，无需指定任何高度即可工作。[这个解决方案值得它自己的答案]

这是一个 Working Fiddle

为什么好？

因为也许有一天你的页眉会改变影响他的高度，或者你的菜单会变大，或者你的页脚需要额外的一行导致他的高度增加..

所有这些更改都会导致您为更改的元素重新修复另一个高度，并为内容重新计算正确的高度。

我的解决方案使它变得更容易，因为所有部分都是流动的。让他们在页面中占据他们需要的空间，内容将始终占据剩余的高度。

浏览器支持:

测试:IE10、Firefox、Chrome、Safari、Opera。 (不适用于旧版 IE，未在其他浏览器上测试)

有什么缺点吗？

是的。不幸的是，由于这个技巧的工作方式，您将需要更改 HTML 的排列方式。

我找到了一种纯 CSS 方法来创建一个 div 容器，其中包含两个子 div。第一个将采用他需要的确切高度，第二个将采用容器高度的剩余部分。

但是如果我想要相反的场景怎么办，如果我想让第二个 div 占据他的确切空间，第一个 div 占据容器的剩余高度怎么办？

我没有找到使用 Pure CSS 完成此操作的简单方法。这就是为什么，我实际上颠倒了div的顺序，第一个保存第二个数据，第二个保存第一个数据，现在我们让第一个div取他的确切高度，第二个根据需要拉伸(stretch)到容器的末端，然后我通过 CSS 旋转它们的 View ，使它们按顺序显示。

对于您的情况，这意味着您必须按该顺序创建 HTML。

1. 标题
2. 菜单
3. 页脚
4. 内容

解决方案:

HTML:

<div class="Container">
    <div class="Header">I'm in the header</div>
    <div class="Menu">I'm in the menu</div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">I'm in the footer</div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper">
                    <div class="Content">
                        I'm in the content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Menu
{
    /*for demonstration only*/
    background-color: #6ea364;
}
.Content
{
    height: 100%;
    overflow: auto;
    /*for demonstration only*/
    background-color: #90adc1;
}
.Footer
{
    /*for demonstration only*/
    background-color: #b5a8b7;
}