如何设置div的高度以匹配剩余高度-Java 学习之路

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

Headers
菜单
内容
页脚

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

我的 Headers 高度为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？

3 回答

3
这是另一个 Pure CSS solution ，无需指定任何高度即可工作 . [这个解决方案应该得到自己的答案]

这是一个Working Fiddle

为什么好？

因为也许你的 Headers 会改变一天影响他的身高，或者你的菜单会增长，或者你的页脚需要一条额外的线来导致他的身高增长..

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

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

浏览器支持：

Tested On: IE10，Firefox，Chrome，Safari，Opera . （不适用于较旧的IE，未在其他浏览器上测试过）

任何下行？

是 . 不幸的是，由于这个技巧的工作方式，你需要改变你的HTML安排 .

我发现了一种纯CSS方式来创建一个 div 容器，有两个子容器 div 's. the first will take the exact height he needs, and the second will take the remaining of the container height' .

但是，如果我想要相反的情况，如果我想要第二个 div 占据他的确切空间并且第一个 div 取出容器的剩余高度怎么办？

我没有找到一个简单的方法来使用Pure CSS . 这就是为什么，我实际上颠倒了 div 的顺序，第一个包含第二个数据，第二个包含第一个数据，现在我们让第一个div取出他的确切高度，第二个伸展到容器的末尾我们想要的，然后我通过CSS旋转他们的视图，使它们按顺序显示 .

对于您的情况，这意味着您必须按该顺序创建HTML .
- Headers
- 菜单
- 页脚
- 内容
解决方案：

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;
}
```
回复于 2024-04-29T05:38:21+08:00
2
这里's a thought. May not work for your specific problem, but it does address the issue of mixing pixels and percents. Under the current definition of the problem, you use a fixed height for both the top (header, menu) and bottom (footer). But you want to have the content take up the rest. One solution would be to pad the top and bottom of the container with the same height of the header and menu on top and the same height as the footer on the bottom. The problem then is that you have a 100% height container plus 100px on top and 20px on bottom. But there'是一个CSS约定 . 它被称为box-sizing，并且与浏览器兼容（只要包含-moz） . 实际上，它计算100％高度 after ，包括填充 . 因此，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（与firefox一起使用-moz）

优点

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

缺点

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

编辑

经过一些实验，我发现最好使用高度而不是最小高度并应用 overflow:auto 等 . 这样，如果内容变得太大，页面就会有适当的侧边栏：http://jsfiddle.net/WLR5S/2/或http://jsfiddle.net/WLR5S/3/
回复于 2024-04-29T05:38:21+08:00

纯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声明任何高度的情况下完成 . 检查该页面中的第二个答案 .

回复于 2024-04-29T05:38:21+08:00

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

3 回答

为什么好？

浏览器支持：

任何下行？

解决方案：

HTML

CSS

演示

来源

优点

缺点

编辑

纯CSS解决方案

相关问题