Question

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

标题
菜单
内容
页脚

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

我的标题高度为50像素，菜单高度为50像素，页脚高度为20像素。

然后我尝试将菜单的高度设置为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 s的顺序，第一个包含第二个数据，第二个包含第一个数据，现在我们让第一个div获取他的确切高度，第二个延伸到第二个数据我们想要的容器的末尾，然后我通过CSS旋转他们的视图，使它们按顺序显示。

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

标题
菜单
页脚
内容

解决方案：

<强> 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;
}

Answer 2

这是一个想法。可能无法解决您的具体问题，但它确实解决了混合像素和百分比的问题。根据当前问题的定义，您对顶部（标题，菜单）和底部（页脚）使用固定高度。但是你希望内容能够占用其余部分。一种解决方案是在顶部和底部填充顶部和底部，顶部和菜单的高度与顶部底部的高度相同。问题是你有一个100％高度的容器加上顶部100px和底部20px。但是有一个CSS约定。它被称为box-sizing，并且与浏览器兼容（只要包含-moz）。实际上，它会在之后计算100％高度 ，包括填充。因此，100％高度加上所有填充仍然等于100％高度。

在实践中它看起来像这样

HTML

<div class="container"> <div class="header"></div> <div class="menu"></div> <div class="content"></div> <div class="footer"></div> </div>

CSS

html, body, .container { min-height: 100%; background:#eee; } .header { height: 50px; position: relative; z-index: 1; } .menu { height: 50px; position: relative; z-index: 1; } .footer { height: 20px; width: 100%; /* needed because this one is position absolute */ bottom: 0%; position:absolute; } .content { height: 100%; width: 100%; /* needed because this one is position absolute */ top: 0%; left: 0%; padding-top: 100px; padding-bottom: 20px; position:absolute; box-sizing: border-box; /* here's the kicker */ -moz-box-sizing: border-box; overflow: auto; /* don't panic. they take the place of normal scroll bars*/ }

演示

http://jsfiddle.net/WLR5S

来源

http://jsfiddle.net/WLR5S/show
http://jsfiddle.net/WLR5S/6/show（使用-fox for firefox）

赞成

显然，关键在于您可以使用填充来获得100％高度的元素以补偿页脚和标题

缺点

您必须对内容和页脚使用绝对位置，并且必须将与z-index相关的位置应用于标题区域

修改

经过一些实验，我发现最好使用高度而不是最小高度并应用overflow:auto等。这样，如果内容太大，页面就会有适当的侧边栏：http://jsfiddle.net/WLR5S/2/或http://jsfiddle.net/WLR5S/3/

Answer 3

纯CSS解决方案

使用calc() （CSS3）

Working Fiddle

<强> HTML：

<div id="container">
    <div id="header">header</div>
    <div id="menu">menu</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</div>

<强> CSS：

html, body {
    margin: 0px;
    height: 100%;
    /*min-width: 1024px;
    min-height: 500px;*/ /*You can uncomment that back if you want)*/
}
#container {
    height: 100%;
}
#header {
    height: 50px;
}
#menu {
    height: 50px;
}
#content {
    height: calc(100% - 120px); /*120 = 50 + 50 + 20*/
    overflow: auto;
}
#footer {
    height: 20px;
}

请注意我删除了您的width:100%，因为这是div元素的默认行为。

使用Pure CSS，也可以在不使用任何高度的情况下完成此操作。检查该页面中的第二个答案。

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

3 个答案:

为什么这么好？

浏览器支持：

任何下行？

解决方案：

HTML

CSS

演示

来源

赞成

缺点

修改

纯CSS解决方案