首先，我知道这个问题之前已经被问过很多次，并且回答的次数与被问的次数一样多。不幸的是我无法获得提供的解决方案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我当前的代码。预先感谢您的帮助。
最佳答案
“现代”方法是使用 Flexbox
DEMO
.wrapper {
min-height: 100%;
position: relative;
display:flex;
flex-direction: column;
justify-content: flex-start;
}
.content {
flex:1;
background:pink;
}
关于html - 让 Div 填充页眉和页脚之间的区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37403685/