高度 100% 不适用于固定页脚 div答案

【问题标题】：Height 100% not working with fixed footer div高度 100% 不适用于固定页脚 div
【发布时间】：2014-06-22 12:00:08
【问题描述】：

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 的剩余量。我不明白为什么高度和最小高度不起作用。我已经尝试过 height 100% 和 min-height 100% 和 height 继承。但是任何组合都不会起作用。我还尝试了 margin-bottom: 0px 和底部的填充。还是一样的情况。

【问题讨论】：

可以提供jsfiddle吗？谢谢。
他的 jsfiddle jsfiddle.net/4YvqW
如果您可以在页脚上应用固定高度：css-tricks.com/snippets/css/sticky-footer
比尔，我的身高是固定的。但是在您提供的示例链接上。如果继续点击添加内容。然后页脚移出屏幕，您必须向下滚动才能看到它。这不是我正在寻找的影响。页脚应始终保持静止，当内容较长时，您可以滚动页面以查看某些页面上的其他内容。我还希望内容框在内容较短时填充颜色并一直填充到页脚。

标签： css height footer fixed

【解决方案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;
}

【讨论】：

我尝试添加这个并使用您的代码。但它仍然不起作用。我仍然无法让我的内容 div 的背景颜色一直延伸到页脚。
哦...对不起，我明白了，您的页脚是固定的，您希望内容 div 向下延伸。让我再看看。
谢谢。我一直在搜索和查看其他代码。但目前还没有找到任何有效的方法。

【解决方案2】：

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

【讨论】：

这确实提供了一个解决方案。但是一个问题是如果内容不是全高。我在右侧有一个滚动条，让页面滚动到 100vh 的底部。

【解决方案3】：

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

this is your fiddle 与 margin-bottom:0;padding-bottom:100%;

【讨论】：

那行不通。即使我尝试在页脚和边距 0 的高度使用填充。这样我可以查看我放入内容 div 的所有文本，而不会被页脚 div 阻挡。但我的内容 div 的背景现在仍处于底部。
哦，好吧，我想我明白你在说什么了。因为位置固定在页脚上，所以从正常流程中移除。见this article 定位。将 .content margin-bottom 设置为 0 并将 padding-bottom 添加到与页脚（50px）高度相同的 .content 。你可以看到in this fiddle 内容不再被截断。我已经更新了上面的答案以反映这一点
克里斯，我试过了，在某些页面上它可以正常工作，在其他内容最少的页面上，它会导致问题并且不起作用。背景颜色突然停止。如果您采用您提供的小提琴示例并将内容减少到一个段落。然后，您会确切地看到我正在尝试解决的问题，即我一直遇到死胡同。感谢您的帮助。
内容什么时候会少于一个段落？
我将其用作多个页面的模板。一页是关于部分，4页提供服务。另一个带有客户列表。它们都有不同数量的内容。这就是问题发生的地方。我正在尝试解决这个问题，无论里面有多少内容。无论某人的窗口有多大或屏幕尺寸有多大，页面中填充的背景颜色都会显示正确。