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);，它在小内容中看起来会更好。但是，显示小的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 个答案: