如何仅使用 CSS 在页眉和页脚之间制作 div 响应高度？答案

【问题标题】：How to make a div responsive height between header and footer with CSS only?如何仅使用 CSS 在页眉和页脚之间制作 div 响应高度？
【发布时间】：2015-08-09 12:48:30
【问题描述】：

我有一个 HTML 页面，它具有固定高度的页眉和页脚以及介于两者之间的元素。

我希望元素始终具有屏幕的总高度（不包括页眉和页脚）。例如，假设屏幕的总高度为 1000px，并且每个页眉/页脚的固定高度为 60px --> div 元素高度应为 880px。现在，我面临的挑战是在不使用 JavaScript/JQuery 的情况下使其具有响应性（无论屏幕大小如何，行为都应如所述）。仅限 CSS。

我已经开始使用“身高：100%”，但不知道如何继续...

 <html>
    <head></head>
    <body>
      <header class="header">my header</header>
      <div class="content">content</div>
      <footer class="footer">my footer</footer>
    </body>
</html>

http://codepen.io/anon/pen/QbGZgL

注意：IE 10 也应该支持...

我曾考虑过 flexbox，但不明白如何准确地使用它来满足我的需求。假设我在页面内容中有一些文本和一些图像。 我不希望屏幕较小时出现垂直滚动条，我希望缩小整个内容以填充可用高度。

CSS3 视口单位：vh/vw/vmin/vmax 能帮到我吗？

【问题讨论】：

使用媒体查询，高度 100% 是一个开始，但考虑小屏幕，调整页脚大小/当用户屏幕较小时将其向下推，这样页脚就不会占用所有内容的空间
类似codepen.io/anon/pen/XbNxqR ?
vh 单元呢？ snook.ca/archives/html_and_css/vm-vh-units? height: calc(100vh - 120px) 将是您的解决方案。
您看过flexbox CSS 功能吗？ IE10 部分支持此功能，可能足以满足您的需求。更多详情here

标签： html css

【解决方案1】：

您可以使用绝对定位来实现这一点。

试试下面的

CSS

.content {
    position:absolute;
    top:100px; /* make this equal to the height of your header tag */
    bottom:100px; /* make this equal to the height of your footer tag */
    left:0;
    right:0;
}
header {
    height:100px;
    background:green;
}
footer {
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:red;
}

给你的标题一个固定的高度。
给你的页脚一个固定的高度和position:absolutebottom:0、left:0;和right:0;。
让你的内容 div position:absolute 并给它一个 left:0; 和一个 right:0;。使顶部位置等于页眉的高度，底部位置等于页脚的高度。

http://jsfiddle.net/z4h64juf/1/

希望对您有所帮助。

【讨论】：

“使顶部位置等于页眉 div 的高度，底部位置等于页脚 div 的高度”是什么意思。 ?
请看例子jsfiddle.net/z4h64juf/1。假设您的标题高度为 100px，使顶部位置为 100px
是的，刚刚看到。谢谢！
看到你没有使用 div。但是要解释一下，如果您的页眉高度为 100 像素，页脚高度为 200 像素，请将内容的顶部位置设置为 100 像素，将内容的底部位置设置为 200 像素，以使其填充可用空间
如果您需要更多说明，请告诉我，但这应该可以解决您的问题。

【解决方案2】：

你可以用 css calc 做到这一点：

html,body{ height:100%; }
.content{
    height: calc(100% - 120px);
}

当然，对于页脚和页眉高度的总和，您必须更改 120 像素。并且不要忘记供应商前缀。

一个建议：不要忘记使用 () 内的单位，也不要忘记在 - + * 符号周围使用空格，否则它将不起作用。

【讨论】：

【解决方案3】：

对页眉和页脚使用固定值很简单。假设您的页眉和页脚的值为 60px，并将它们定位在顶部和底部的粘性（固定）位置，您有以下代码：

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
}
.footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    height: 60px;
}
.content {
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 0;
    bottom: 0;
    /*Now, if you need your content to overflow properly when higher than the space provided by the screen you may add:
    overflow-y: scroll;
    and a scrollbar will show up
    */
}

如果需要页眉和页脚为%，则需要将html和body的高度设置为100%，并根据各自的%值设置.content的顶部和底部。您可以考虑在 css 代码的第一部分添加 html 和 body，只是为了遵循页面中元素的级联规则。并且body应该是margin: 0;

使用绝对位置和固定位置并将 left: 0 和 right: 0 添加到所有元素，您将跳过宽度值。

这里有一个溢出的例子：http://codepen.io/desginarti/pen/OVbBoe

【讨论】：

【解决方案4】：

这是一个简单的设置，我认为您想要完成。只有您必须为 flex 属性添加前缀/使用旧语法，才能支持 IE10。

我们有一个包装元素，我们说：你现在是一个 flex 元素，你的子元素可以是具有 display: flex; 的 flex(ible) 元素；

对于我们使用列的方向，默认为“行”，但我们希望它们在彼此下方。

最后，我们为页眉和页脚以及主要元素定义高度：您拥有 flex 属性 '1'。这将填满元素之间剩余的空间。

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  -ms-flex-direction: column;
  background: red;
}

header {
  height: 100px;
  background: blue;
}

main {
  flex: 1;
  background: orange;
}

footer {
  height: 20px;
  background: yellow;
}

<div class="wrapper">
  <header>
    Header element
  </header>

  <main>
    <h1> Main</h1>
  </main>

  <footer>
    Footer  
  </footer>
</div>

【讨论】：

【解决方案5】：

这里是创建响应式元素的快速提示，可在缩放时保持其纵横比。

但是，当我们为同一个元素指定 padding-bottom 值时，填充测量值是相对于元素的宽度计算的：

.rect {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

正确的纵横比

你会注意到我已经将元素的 height 属性设置为 0，以确保在计算可见高度时不会将任何子元素的高度添加到填充值中。

关于子元素的说明

如果您还想为子元素指定基于百分比的高度，则需要为父元素和子元素分配绝对或相对位置值：

.rect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
 }
.rect p {
    position: absolute;
    margin: 0;
    height: 100%;
    }

View A Demo

【讨论】：

【解决方案6】：

我向您推荐Flexible Box Layout Module，它对您的情况有很好的支持（IE10+）。 CSS 的很多经典问题都可以用它轻松解决，看看Solved by Flexbox 列表吧。

解决您的问题的一个简单方法是遵循 HTML：

<div class="container">
    <header>Header</header>
    <main>Page contents</main>
    <footer>Footer</footer>
</div>

使用简单的 CSS：

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.container main {
    flex-grow: 1;
    flex-shrink: 0;
}

请注意，该规范自 2009 年以来已更改了 3 次，因此供应商前缀的语法和需求几乎没有差异。我显示的链接也谈到了它。当然，选择使用autoprefixer也无所谓。

【讨论】：

我喜欢实施新技术的想法，但我也必须提出关于使用弹性模块的标志。这与旧浏览器不兼容（当然不是 IE10，'only supports an old incompatible draft version of the specification'）。我目前正在工作，无法为此提供任何有价值的解决方案。我只是想建议不要过度依赖 flexbox 模块。
当然，如果需要支持各种浏览器，我同意您不要过度依赖 Flexbox。但是基于OP想要的，IE10支持的旧草案完全覆盖了它。此外，Flexbox 已经是 HTML5Please 上的推荐。个人认为，朝这个方向发展的时机已经到来。

【解决方案7】：

使用position:fixed; 修复页眉和页脚并用于内容

padding: 60px 0;
height: 100%;
box-sizing: border-box;

http://codepen.io/anon/pen/xGRyNW

【讨论】：

【解决方案8】：

* { padding: 0; margin: 0; }
body { height: 100%; width: 100%; position: absolute; }
header, footer { height: 50px; width: 100%; background: red; position: fixed; }
footer { bottom: 0; }
main { min-height: calc(100% - 100px); padding: 50px 0; overflow: auto; }

<header></header>
<main>
    <p>Hello1</p>
    <p>Hello2</p>
    <p>Hello3</p>
    <p>Hello4</p>
    <p>Hello5</p>
    <p>Hello6</p>
    <p>Hello7</p>
    <p>Hello8</p>
    <p>Hello9</p>
    <p>Hello10</p>
    <p>Hello11</p>
    <p>Hello12</p>
    <p>Hello13</p>
    <p>Hello14</p>
    <p>Hello15</p>
    <p>Hello16</p>
    <p>Hello17</p>
    <p>Hello18</p>
    <p>Hello19</p>
    <p>Hello20</p>
</main>
<footer></footer>

【讨论】：

【解决方案9】：

试试这个，

HTML

<div class="pagewidth">
    <header>
    </header>
    <section class="wrapper">
    </section>
    <footer>
    </footer>
</div>

CSS

html,body{
    height: 100%;
    background: black;
    margin:0;
    padding:0;
}
*{
   box-sizing: border-box;
}
.pagewidth{   
    position: relative;
    height: 100%;
    min-height:100%;
}
header{
    background: green;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 30px;
    z-index:2;
}
.wrapper{
    background: black;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
    width:100%;
    height:100%;
    padding: 30px 0;
}
footer{
    background: blue;
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    height: 30px;
    z-index:2;
}

https://jsfiddle.net/rtwLe6zu/

【讨论】：

【解决方案10】：

您需要使用 vh（视口高度）。 height: 100vh; 会从上到下覆盖屏幕。

如果您想了解更多关于其他特定单位的信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/length

【讨论】：