高度 100% 不适用于固定页脚 div
Posted
技术标签:
【中文标题】高度 100% 不适用于固定页脚 div【英文标题】：Height 100% not working with fixed footer 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 比尔，我的身高是固定的。但是在您提供的示例链接上。如果继续点击添加内容。然后页脚移出屏幕，您必须向下滚动才能看到它。这不是我正在寻找的影响。页脚应始终保持静止，当内容较长时，您可以滚动页面以查看某些页面上的其他内容。我还希望内容框在内容较短时填充颜色并一直填充到页脚。 【参考方案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页提供服务。另一个带有客户列表。它们都有不同数量的内容。这就是问题发生的地方。我正在尝试解决这个问题，无论里面有多少内容。无论某人的窗口有多大或屏幕尺寸有多大，页面中填充的背景颜色都会显示正确。以上是关于高度 100% 不适用于固定页脚 div的主要内容，如果未能解决你的问题，请参考以下文章
css - max-height: 100% 不适用于 textarea