Question

的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。 mframe div占据整个页面，但内容不会填满占用mframe div的剩余量。我不明白为什么高度和最小高度不起作用。我已经尝试了高度100％和最小高度100％和高度继承。但没有一个可以任意组合。我也尝试了margin-bottom：0px和底部的填充。情况相同。

Answer 1

最近有这个问题，已经有一些例子，但这里有用的东西：

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

Answer 2

.content {
    margin-bottom: 0;
    padding-bottom: 100%;
}

<{> this is your fiddle margin-bottom:0;padding-bottom:100%;

Answer 3

作为您特定问题的解决方案，想要扩展内容div的高度，您只需将min-height:100%中的.content更改为min-height: 100vh;

高度100％不使用固定页脚div

3 个答案: