css：
body {
height: 100%;
background-color: red;
}
.mframe {
display: block;
position: relative;
width: 1024px;
min-height: 100%;
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 100;
}
.header {
display: block;
position: relative;
float: left;
width: 1024px;
height: 125px;
margin-top: 25px;
color: #FFF;
background-color: #666;
}
.navbar {
display: block;
position: relative;
float: left;
width: 1024px;
height: 55px;
margin-top: 70px;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #000;
background-color: #171717;
}
.content {
display: block;
position: relative;
float: left;
width: 1024px;
height: 100%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 250px;
background-color: #333;
font-size: 20px;
font-family: "Lusitana", serif;
color: #FFF;
}
.footer {
display: block;
position: fixed;
width: 100%;
height: 50px;
bottom: 0px;
left: 0px;
color: #FFF;
text-align: center;
background-color: #111111;
}
html:
<body>
<div class="mframe">
<div class="header">
My Header
<div class="navbar">
Navbar
</div>
</div>
<div class="content">
Some Content goes here
</div>
<div class="footer">
My Footer goes here
</div>
</div>
</body>
我的一切都很好，如果内容超过屏幕。我可以滚动，页脚保持固定。但是如果内容小于屏幕。我希望我的内容div填充到页脚，这样我就可以在这个div上一直到页脚都有背景色。
这是我的JSFiddle：http://jsfiddle.net/8BallDzigns/v6fV9/5/
简短更新：
我以为我的固定页脚造成了问题。但是，如果我从html中删除页脚，只保留内容div。mframediv占据了整个页面，但内容不会填满来占据mframe的剩余量。我不明白为什么高度和最小高度不起作用。我尝试过身高100%和最小身高100%和身高继承。但任何组合都不起作用。我还尝试了底部边距：0px和底部填充。还是一样的情况。
最近遇到了这个问题，已经有一些例子了，但对我来说有效的是：
html {
height:100%;
}
body {
min-height:100%;
position:relative;
}
.mframe {
min-height:100%;
margin:0;
padding:0;
}
.footer {
position:absolute;
bottom:0;
left:0;
right:0;
height:100px;
}
为了解决您的特定问题，想要扩展内容div的高度，您可以简单地将.content中的min-height:100%更改为min-height: 100vh;
.content {
margin-bottom: 0;
padding-bottom: 100%;
}
这是你的margin-bottom:0;padding-bottom:100%;