高度为100％的弹性DIV-（页眉高度+页脚高度）

Question

如何设计内容DIV到弹性，例如100％高度-（页眉高度+页脚高度）？

我尝试了以下编码，在较小的内容中它可以达到我期望的99％。 但是，它在大量内容上失败。

<html>
<head>
<title>Demo</title>
<style type="text/css">
html, body {
    min-height: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#header
{
    position: relative;
    top: 0px;
    text-align: center;
    width: 800px;
    margin: 0 auto;
    height: 100px;
    background: black;
    line-height: 100px;
    color: white;
    border-bottom: 2px solid white;
}
#content
{
    position: relative;
    text-align: justify;
    width: 800px;
    margin: 0 auto;
    background: lightgrey;
    min-height: calc(100vh - 140px);
    height: calc(100vh - 140px);
    /* min-height: 100%; */
    /* height: 100%; */
    color: black;
}
#space
{
    padding: 30px;
}
#footer
{
    position: relative;
    bottom: 0px;
    text-align: center;
    width: 800px;
    margin: 0 auto;
    height: 40px;
    background: black;
    line-height: 40px;
    color: white;
    border-top: 2px solid white;
}
</style>
</head>
<body>
<div id="main">
<div id="header">Header Title</div>
<div id="content">
<div id="space">
Content
</div>
</div>
<div id="footer">Footer Title</div>
</div>
</body>
</html>

如果我使用min-height: calc(100vh - 140px); height: calc(100vh - 140px); min-height: calc(100vh - 140px); height: calc(100vh - 140px); 小内容看起来更好。 但是，显示较小的y轴滚动。

Answer 1

这是代码示例的更新，该示例保持100％高，然后随内容增长。

我所做的就是添加box-sizing: border-box这样就可以在高度范围内计算页眉/页脚边框，或者可以将内容宽度更改为min-height: calc(100% - 144px);

 html, body { height: 100%; margin: 0px; padding: 0px; } #header { text-align: center; width: 800px; margin: 0 auto; height: 100px; background: black; line-height: 98px; color: white; border-bottom: 2px solid white; box-sizing: border-box; } #content { text-align: justify; width: 800px; margin: 0 auto; background: lightgrey; min-height: calc(100vh - 140px); color: black; } #space { padding: 30px; } #footer { text-align: center; width: 800px; margin: 0 auto; height: 40px; background: black; line-height: 38px; color: white; border-top: 2px solid white; box-sizing: border-box; }

 <div id="main"> <div id="header">Header Title</div> <div id="content"> <div id="space"> Content <br> Content <br> Content <br> Content <br> Content <br> Content <br> Content <br> Content <br> Content <br> Content <br> Content <br> </div> </div> <div id="footer">Footer Title</div> </div>

高度为100％的弹性DIV-（页眉高度+页脚高度）

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-26 07:29:48

高度为100％的弹性DIV-（页眉高度+页脚高度）

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-26 07:29:48

解决方案1
1 已采纳 2016-01-26 07:29:48