怎么做固定导航，页脚和剩余高度的内容没有javascript或显示：表？

Question

处理需要此类布局的内容：

我需要内容在屏幕上显示剩余空间的隐含大小。我尝试了很多东西

<div id="wrapper">
    <div id="header">
    </div>

    <div id="content">
    </div><!-- /content -->


    <div id="footer">
    </div>
</div>

这适用于显示表技术：

#wrapper {display: table; height: 100%; width: 100%; background: yellow;}
#header { display: table-row; background: black;height: 50px;}
#container { display: table-row; height: 100% }
#footer {display: table-row;background: black; height: 50px;}

但如果没有它我该怎么办呢？

#wrapper {width: 100%; height: 100%; position: relative; min-height: 800px;}
#header {position: relative; width: 100%; height: 42px;}
#footer {height: 45px; width: 100%; background: #000; position: absolute; bottom: 0; overflow-y: hidden;}

我也不希望内容是位置：绝对

Answer 1

如果您可以使用固定的高度，这可能会有效：

body, html, #wrapper, #content
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#header,
#footer
{
    position: relative;
    height: 42px;
    background: red;
}
#content
{
    height: auto;
    min-height: 100%;
    margin:-42px 0;
    padding: 42px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这是fiddle。

Answer 2

使用此HTML

<div id="wrapper">
<div id="header">This is my header
</div>

<div id="content">This is my content
</div><!-- /content -->


<div id="footer">This is my footer
</div>
</div>

css就像这样

#wrapper {width: 100%; 
height: 100%; 
position: relative; 
min-height: 800px;}


#header {position: relative; 
width: 100%; 
height: 42px; 
background-color:#CA3A3A;}


#content{background-color:#089ED0;
min-height: 800px;}


#footer {height: 45px; 
width: 100%; 
background-color:#CA3A3A; 
position: absolute; 
bottom: 0; 
overflow-y: hidden;}

Answer 3

过去这对我有用： http://ryanfait.com/sticky-footer/

Answer 4

我发现的最佳解决方案是使用css3的新计算方法。 我还用modernizr测试它的可用性，如果它不可用，我用JS手动设置容器区域的高度。