Question

首先，我知道这个问题之前已被多次询问过，并且回答的次数与被问及的次数一样多。很遗憾，我无法获得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。提前感谢您的帮助。

Answer 1

＆＃39;现代＆＃39;方法是使用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

这是您的解决方案。

＆＃13;

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;

}

＆＃13;

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

＆＃13;

Answer 4

我认为你需要这段代码：

.content { 
    height:100vh;
}

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

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

HTML

CSS

4 个答案:

DEMO