我正在尝试扩展我的内容div的高度，以填充浏览器，同时还实现一个粘脚。
我已经使用这个方法实现了粘贴页脚->https://css-tricks.com/snippets/css/sticky-footer/
我似乎不能保持页脚的位置，同时也强制内容div填充高度。
我已经搜索了一段时间如何做到这一点，但还没有提出任何有用的东西。如有任何帮助，不胜感激。
这是我的代码-> https://jsfiddle.net/rpunumr6/
* {
margin: 0;
}
html, body {
height: 100%;
background-color: #576772;
}
.page-wrap {
min-height: 100%;
margin-bottom: -60px;
}
.page-wrap:after {
content:"";
display: block;
}
.site-footer, .page-wrap:after {
height: 60px;
}
.site-footer {
background-color: #7C8B9E;
text-align: center;
width: 1000px;
}
header {
margin: 0 auto;
background-color: #728579;
text-align: center;
padding: 20px;
width: 1200px;
}
.site-body {
background-color: #DCE0D8;
width: 880px;
margin: 0 auto;
padding: 40px;
min-height: 100%;
height: auto;
}
h1 {
text-align: center;
}
footer {
background-color: #7C8B9E;
height: 60px;
width: 1000px;
margin: 0 auto;
}<title>Page Title</title>
<body>
<div class="page-wrap">
<header>
<nav></nav>
</header>
<div class="site-body">
<h1>Title</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<footer class="site-footer"></footer>
</body>只需使用css calc函数来计算.site-bodydiv的height。
知道header的height加上footer的height，最后.site-body的padding, calc将使您从百分比值中减去像素值。
CSS calc ()
calc() CSS函数可以在任何需要长度、频率、角度、时间、数字或整数的地方使用。使用calc()，您可以执行计算来确定CSS属性值。
下面是一个例子。
@charset"utf-8";
/* CSS Document */
* {
margin: 0;
}
html, body {
height: 100%;
background-color: #576772;
}
.page-wrap {
height: 100%;
margin-bottom: -60px;
}
.page-wrap:after {
content:"";
display: block;
}
.site-footer, .page-wrap:after {
height: 60px;
}
.site-footer {
background-color: #7C8B9E;
text-align: center;
width: 1000px;
}
header {
margin: 0 auto;
background-color: #728579;
text-align: center;
padding: 20px;
width: 1200px;
}
section {
}
.site-body {
background-color: #DCE0D8;
width: 880px;
margin: 0 auto;
padding: 40px;
height: calc(100% - 180px);
}
h1 {
text-align: center;
}
footer {
background-color: #7C8B9E;
text-align: center;
height: 60px;
width: 1000px;
margin: 0 auto;
}<title>Page Title</title>
<body>
<div class="page-wrap">
<header>
<nav></nav>
</header>
<div class="site-body">
<h1>Title</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<footer class="site-footer"></footer>
</body>我有同样的问题，发现解决它的唯一方法(而不是模仿它，通过改变正文背景颜色与内容背景颜色相同)是使用java脚本。在代码片段下面，我使用。
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '.site-body' ).css( 'padding-bottom', height_diff ); }
检查窗口和主体之间的高度差异，然后在内容的底部添加填充来填充屏幕。
我使用这个片段而不是纯css，因为我的页眉和页脚高度是动态的，而不是固定的。