0

处理需要这种布局的东西：

在此处输入图像描述

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

<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;}

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

4

4 回答 4

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;
}

这是小提琴。

于 2013-03-26T20:59:29.910 回答
0

使用此 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;}
于 2013-03-26T21:02:31.393 回答
0

我为此找到的最佳解决方案是使用 css3 的新 calc 方法。我还用modernizr测试了它的可用性，如果它不可用，我用JS手动设置容器区域的高度。

于 2013-10-08T20:35:56.487 回答
0

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

于 2013-03-26T21:03:00.357 回答