制作 Div 填充页眉和页脚之间的区域

Question

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

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

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。在此先感谢您的帮助。

Answer 1

'modern'方式是使用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

Answer 2

您的代码确实有效。如果 <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;
}

Answer 3

这是您的解决方案。

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>

Answer 4

我认为您需要此代码：

.content { 
    height:100vh;
}

Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.^[reference]

制作 Div 填充页眉和页脚之间的区域

Make a Div Fill the Area Between a Header and Footer

html

css

positioning

HTML

CSS

DEMO