css-only动态高度页脚100％div高度

我有一个三部分布局：标题，内容和页脚。我对绝对定位技术非常熟悉;当我想要内容div扩展到可用高度的100％时，我使用它很多。css-only动态高度页脚100％div高度

在这种情况下，我的问题是，我不提前知道页脚的高度，它是基于其自身内容的动态，它具有未知数量的行（通常在1到3行之间）。
我想要主要内容的div抓住100％的可用高度，考虑到标题的高度（这是固定的，所以这是一个无脑）和页脚的高度，因此我不能使用绝对定位技术在这里。

我有涉及JavaScript的解决方案，但我试图找到一个只有css的解决方案。理想情况下，它应该是一个跨浏览器的解决方案（IE8，IE9，Chrome，Firefox和Safari）。

来源

2013-03-16 Yoni

心灵张贴的jsfiddle？ – luiges90 2013-03-16 13:38:43

发布什么？我没有工作布局来演示，它不像我有错误的布局，我不明白为什么它会失败 – Yoni 2013-03-16 13:40:07

这就是说，你有什么尝试？如果你尝试了它并且失败 - volia，那么你有错误的布局:) – luiges90 2013-03-16 13:40:31

试试这个

<!doctype html> 
<html> 
<body> 
<style> 
html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 

} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 

    background:#6cf; 
} 
</style> 
<div id="container"> 
    <div id="header">header</div> 
    <div id="body">body</div> 
    <div id="footer">footer</div> 
</div> 
</body> 
</html>

来源

2013-03-16 13:41:51

它不起作用，因为页脚是绝对定位的。它被取出正常流量，并且不会限制身体占用的空间。此外，身体没有伸展到100％的身高 – Yoni 2013-03-17 13:21:47

css-only动态高度页脚100％div高度

回答

相关问题