我有一个带有标题(具有动态高度!)和内容的页面。内容应填满页面的其余部分,即使其中没​​有足够的文本。

到目前为止,这个问题已经被问过很多次了,并且总是用我尝试过的类似代码来回答:

html, body {
  height: 100%;
}
.header {
  height: 50px;
  background-color: #ff0;
}
.content {
  min-height: 100%;
  background-color: #ccc;
}


我的问题是,使用此代码,.content的高度不仅会填满页面的其余部分,而且还会像屏幕大小一样显示高度。但是,使用此代码,我必须滚动查看.content的底部。

代码:http://jsbin.com/bilux/1/edit

当我将.content高度设置为100%时,会出现一个滚动条:



编辑:

感谢您提供解决静态标头高度的方法!但是在不知道我的标头高度的情况下,有没有办法做到这一点?

最佳答案

您可以像这样使用calc函数:

.content {
 min-height: calc(100% - 50px);
 background-color: #ccc;
}


另请注意,默认的正文边距可能会产生意外的结果,还应将其重置为零。

Working demo.

更新:如果您希望它更具动态性,我敢肯定您可以尝试使用flex-box布局,但仍不受广泛支持(只是最新版本的现代浏览器。对于较旧的浏览器,您应该添加prefixfree之类的库)。另一个解决方案是您可以尝试对表头使用表格布局,例如updated demo.

关于html - 高度:100%填充内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23097711/

10-12 12:38
查看更多