高度：100％满溢内容

我有一个标题页（动态高度！）和内容。内容应填写页面的其余部分 - 即使它在它没有足够的文本。高度：100％满溢内容

到目前为止，这是这是问了很多次，总是与类似的代码，我已经试过answerd一个问题：

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

目前有当我设置。内容高度为100％会出现滚动条：

image with the problem

编辑：

感谢解决这个问题的方法为静态标题高度！但是如果不知道我的标题的高度，是不是有办法做到这一点？

来源

2014-04-16 Jere

可以使用calc功能是这样的：

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

还要注意的是身体的默认保证金可能会使意外的结果，你也应该将其重置为零。

Working demo.

UPDATE：如果你想让它更加动态的，我敢肯定，你可以尝试使用柔性盒布局，但它仍然没有得到广泛的支持（只是最现代化的最新版本浏览器。对于旧的浏览器，你应该添加库，例如prefixfree）。另一种方案是，你可以尝试使用表格的布局的头就像这个updated demo.

来源

2014-04-16 02:14:22

但如果我不知道我的标题的高度？ – Jere

你猜。阅读我的答案。 – WASasquatch

@亲爱的请看我的更新。 –

absolute定位可能是答案。取决于整个页面的结构。检查出来http://jsbin.com/qeveroci/1/edit

来源

2014-04-16 02:10:52 Linek

您正在使用的页面，的100％，而其他元素占用一些空间。根据所用空间调整您的百分比。举例来说，在我的网站，它需要92％

的WIDTH和HEIGHT元素是基于网页的BODY（这是基于HTML页面的），而不是它有空间。所以100％是屏幕空间的100％。而在网页上的其他元素可使用空间的10％，并且内容推到110％。

当你的页面充满内容，并且你得到一个滚动条时，这是相同的概念。身体的高度基于持有不断增长的内容的内容区域容器的高度而增长。

来源

2014-04-16 02:24:35 WASasquatch

高度：100％满溢内容

回答

相关问题