使一个 div 填充页眉和页脚之间的区域答案

【问题标题】：Make a Div Fill the Area Between a Header and Footer使一个 div 填充页眉和页脚之间的区域
【发布时间】：2016-05-24 03:01:34
【问题描述】：

首先，我知道这个问题之前已经被问过很多次，并且回答的次数与被问到的次数一样多。不幸的是，我无法让here、here 和here 提供的解决方案为我工作。我只使用 html 和 css 几个星期，通过 Codecademy 自学。可悲的是，Codecademy 的定位教程充满了错误，所以我这里的代码是反复试验的产物，我不确定是否有任何“正确”设置。

事不宜迟，这是我当前的代码：

HTML

<!DOCTYPE html> 
<html> 
    <head>
        <title>Header Test</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="content"></div> 
            <div class="footer"></div>
        </div>
    </body>
</html>

CSS

html, body { 
    height:100%;
    margin: 0;
    padding: 0;
}

.wrapper { 
    min-height: 100%;
    position: relative;
}

.header { 
    height: 75px;
    padding: 10px;
    background-color: red;
}  

.content { 
    height:100%;
}

.footer { 
    width:100%;
    height: 75px;
    bottom: 0;
    position: absolute;
    background-color: red;
}

这段代码使我成为一个页眉和页脚，它们之间有一个内容 div。但是，内容 div 的高度为 0px。我希望 div 从页眉底部延伸到页脚顶部。

这是我当前代码的JSFiddle。提前感谢您的帮助。

【问题讨论】：

代码正在运行。由于内容类具有 100% 的高度值，那么无论您在该 div 中放置什么，它都会为您提供内容本身的 100% 高度。另一方面尝试使用固定高度。
因为您的 div 中没有内容。您在中间看到的空间，因为您的页脚是绝对的并且位于底部

标签： html css positioning

【解决方案1】：

“现代”方式是使用 flexbox

DEMO

.wrapper { 
  min-height: 100%;
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}


.content { 
  flex:1;
  background:pink;
}

编辑：DEMO USING TABLE

【讨论】：

这是我一直在寻找的效果。 flexbox的兼容性如何？我想让我的最终网站与 IE9 兼容，因为仍有很多人在使用它。
另一种方法是在.wrapper 上使用display:table，在.content 上使用display:table-cell 和height:100%。这是一个演示jsfiddle.net/mirohristov/40ydc2fg/3
两种解决方案都很好用，谢谢 Miro。顺便说一句，我认为您的意思是 .content 上的 display:table-row。至少这就是你在小提琴中使用的:)
是的。我的错。我还注意到您使用position:absolute 作为不需要的页脚。只需在页眉、内容和页脚添加table-row。这样，如果窗口小于所有 3 个窗口的总和，它将为您提供滚动条。演示：jsfiddle.net/mirohristov/40ydc2fg/4
好的，再次感谢。我知道 cmets 不适合进行冗长的讨论，但您介意解释使用 flexbox 而非 display:table 的优点吗？它们目前具有相同的外观，并且display:table（我假设）与更多浏览器兼容。

【解决方案2】：

这是您的解决方案。

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

.wrapper {

  min-height: 100%;

  position: relative;

}

.header {

  height: 75px;

  padding: 10px;

  background-color: red;

}

.content {

  height: 100%;

  width: 100%;

  position: absolute;

  display: block;

  background-color: blue;

}

.footer {

  width: 100%;

  height: 75px;

  bottom: 0;

  position: absolute;

  background-color: orange;

}

<div class="wrapper">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

【讨论】：

【解决方案3】：

我认为您需要此代码：

.content { 
    height:100vh;
}

Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。^[reference]

【讨论】：

【解决方案4】：

您的代码实际上正在运行。如果<div class"content"> 为空，则高度为 0px。否则使用固定高度值。

HTML：

    <body>
        <div id="header"></div>
            <div id="content"><div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada diam eu aliquet pretium. Donec dapibus condimentum lectus a porta. Fusce sed augue bibendum, egestas nisi rhoncus, varius lectus. Nullam vitae erat vitae purus dapibus aliquet. Praesent id urna aliquet, interdum mi sit amet, dictum nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis sodales ligula, nec pulvinar neque ornare et. Vivamus ultrices odio venenatis lectus semper, at luctus sem tempus. Ut molestie sem ac faucibus pulvinar. Ut in massa et mauris congue accumsan at eu magna. Sed augue risus, varius eget vehicula eget, fringilla in magna. Proin tempus ante leo, non tempor justo cursus a. Sed a posuere nisl.

Nulla imperdiet nulla auctor tellus ultricies, quis cursus libero finibus. Praesent sed justo nec ex blandit pretium non in eros. Praesent a mollis ante. Donec sit amet vehicula quam, ut euismod dolor. Vivamus vitae faucibus felis. Ut eget condimentum arcu. Curabitur vel felis tortor. Quisque a semper neque. Fusce a diam ac elit fringilla sodales sit amet vel ligula.

Donec blandit congue commodo. Etiam dolor tellus, viverra et molestie vel, bibendum non diam. Vivamus dignissim ac sapien eget vulputate. Pellentesque eu ex nec tellus malesuada sollicitudin. Vivamus non erat eu est dapibus accumsan nec a erat. Donec a ligula tellus. Maecenas et ullamcorper urna.

Morbi maximus, quam a vulputate hendrerit, augue enim consectetur massa, vel tristique dui felis vel leo. Ut id pellentesque nisi, eget congue magna. Nunc vitae auctor quam. Etiam varius, nisi sed cursus faucibus, felis metus luctus enim, eu consectetur elit nulla ut magna. Donec mi tortor, ultricies eget fringilla vitae, fringilla et nisl. Vestibulum vestibulum neque leo, in viverra sapien vehicula quis. Donec fermentum placerat dignissim. Duis vestibulum dolor a tellus eleifend ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis suscipit diam. Vivamus tristique dignissim fermentum. Phasellus eu cursus ipsum. Quisque magna purus, ultrices quis dolor vitae, dignissim pharetra nisi. Sed sollicitudin blandit nulla, a consequat lorem congue in. Fusce a dapibus orci. Aenean sed laoreet ex.

Aenean eget volutpat dui, a eleifend sem. Fusce malesuada sodales dapibus. Cras gravida ornare mauris, a ullamcorper massa pulvinar eu. Proin facilisis dapibus commodo. Nullam ac sem ultrices, iaculis nulla at, pulvinar velit. Cras auctor, mauris sit amet viverra tristique, nunc turpis faucibus lacus, at rutrum massa diam eu nisi. Aenean facilisis metus tempor accumsan tristique. Phasellus condimentum mauris a neque iaculis pretium ut vitae ligula. Vivamus congue mi eget sagittis iaculis. Praesent urna ipsum, porta in eros et, commodo vulputate odio. Vestibulum bibendum arcu sit amet orci viverra pellentesque. Etiam pellentesque sodales nisi, sit amet consequat mi ornare ut. Donec non cursus velit.
            </div>
        </div>
        <div id="footer"></div>
    </body>

CSS：

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
  padding: 70px 0;
}

【讨论】：

感谢您的回复。如果我使用固定的高度值，我是否必须为我制作的每个网页手动设置内容框的高度？例如，一页可能有 4 个段落和另外 8 个段落，所以我假设我必须更改内容 div 的高度以考虑其中的文本/图像数量。
@socks，我更新了答案。这样您就可以在所有页面中使用它。 :) 如果这对您有帮助，请投票。