Question

我正在尝试模仿具有固定页眉和页脚的布局，其内容适合两者之间没有javascript或使用表格。您可以看到我正在寻找的内容HERE

Answer 1

实际上这很简单。这是完整的代码，只需复制并粘贴即可。

感谢Jeremy（http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div）。

<style type="text/css">
html, body 
{ 
    height: 100%;
    padding: 0;
    margin: 0; 
} 

#header
{
    height: 100px;
    color: #FFF;
    background: #000;
}

#content
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    color: #FFF;
    background: #333;
}

#footer
{
    height: 100px; 
    color: #FFF;
    background: #000;   
}

#divider 
{
    height: 100px; /*Divider must be same height as Footer */
}

</style>

<div id="content">
    <div id="header">
        Header
    </div>

    Content Text

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

试图模仿Lamborghini.com的布局无济于事

1 个答案: