Question

我的结构如下：

HEADER -> 100% width -> variable height

CONTENT -> 1080px width -> I NEED TO FILL THE PAGE HEIGHT WHEN SHORT CONTENT

FOOTER -> 100% WIDTH -> 230 px height

我看到人们使用CSS中的CALC 但在我的情况下，我的标题没有固定的高度，因此数学不起作用。

有什么想法吗？

我从网站上获取了这些代码并添加了一些颜色来说明：http://pastebin.com/kyd35zp6

我需要红色div来填充页面。

任何帮助都很好！

更新

我忘了提到这是一个粘性页脚

我需要这样的事情：http://maujor.com/tutorial/rodape/rodape-fixo-no-fim-da-pagina-7.html

但我需要100％宽度标题和100％宽度页脚。内容必须看起来像是一个白色的“破折号”，周围有不同的背景。

Answer 1

将HEADER CONTENT FOOTER包裹在#container ....然后

SET - html,body, #container{height:100%;}

之后，如果您将CONTENT设置为{height:100%}，则可以使用

try it here

Answer 2

body
{
    margin: 0;
}
#header
{
    width: 100%;
    height: 70px;
    background: black;
    color: white;
}
#container
{
    width: 100%;
    min-width: 1080px;
    height: 100%;
    background: red;
    color: white;
    margin-bottom: 70px;
}
#footer
{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 70px;
    background: green;
    color: white;
}

Fiddle

100％宽度的页眉和页脚bur固定内容，高度为100％

2 个答案: