如何使HTML内容占据所有可用的高度？

请考虑下面的jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/（你可以在问题主体后面找到代码）。如何使HTML内容占据所有可用的高度？

它代表了经典的页眉，内容，页脚HTML布局的简单示例。请注意：

内容不与页脚重叠。调整窗口大小将最终创建一个垂直滚动条，而不是将内容移动到页脚上。
没有多余的滚动条。
没有绝对的高度，除了页脚，可以假定不高于2em。
内容高度小于页眉和页脚之间的可用高度。

我想保留前三个属性，但更改最后一个属性，以便内容高度是页眉和页脚之间的完整高度。我想这样做，而不诉诸于JavaScript。

如果可以，我该怎么做？

编辑

给定的HTML和CSS只是一个例子。只要最终结果符合我的问题的条件，您就可以随意更改它们。

EDIT2

很显然，我不是什么我想要实现与内容非常清楚。这是我现在拥有的： enter image description here

请注意，内容不会扩展标题和页脚之间的可用高度。

什么我以后是这样的： enter image description here

（在MSPAINT编辑，我不知道这样做真）

EDIT3

增加了一个除外条款的第3条件：

除了页脚，可以假定不高于2em。

HTML：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css"> 
</head> 
<body> 
<div class="container"> 
<div class="header"> 
    Header goes here. 
    </div> 

    <div class="content"> 
    <div class="innerWrapper"> 
     Content goes here. 
     </div> 
    </div> 

    <div class="footer"> 
    <div class="status"> 
     Footer goes here. 
    <div> 
    </div> 
</div> 
</body> 
</html>

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
} 

.container { 
    position: relative; /* needed for footer positioning*/ 
    margin: 0 auto; 
    height: auto; 
    min-height: 100%; 
    background-color: #ddd; 
} 

.content { 
    padding: 0em 0em 2em; /* bottom padding for footer */ 
    background-color: #bbb; 
} 

.footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; /* stick to bottom */ 
} 

.status, .header { 
    background-color: #999; 
    border: solid 1px #000000; 
}

来源

2012-10-25 mark

标记在哪里？未关闭。 –

在我的理由中，我只能说“哎呀”。 – mark

可能有几种方法可以做到这一点，但唯一的办法我能想到的此刻所有涉及设置/了解页眉和页脚的高度。

下面是一个使用display:tablehttp://jsfiddle.net/fLnkf/

取决于如果你的要求，让你改变你的HTML或使用CSS3可能有其他的解决方案。

希望这有助于！

来源

2012-10-25 19:26:54 brains911

务必改变HTML和CSS。只要确保问题的条件得到满足。 – mark

有一个多余的垂直滚动条 - 打破条件2. – mark

有趣的问题:)这里有两个选项[http://jsfiddle.net/FeeaD/](http://jsfiddle.net/FeeaD/）。使用一些流血的边缘CSS3和回落一些窗口调整JavaScript。 – brains911

如何使HTML内容占据所有可用的高度？

回答

相关问题