0

我正在尝试做一些非常简单的事情，但我现在两天都做不到。

我有这个简单的 HTML 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            html, body {
                margin:0;
                padding:0;
                height:100%;
            }            
            .container
            {
                position:relative;    
                height: 100%;
                overflow: hidden;
            }
            .header
            {
                height: 180px;
                width: 100%;
                background-color: #ccc;
            }
            .content
            {
                height:100%;
                width: 100%;
                background-color: #00f;
            }
            .footer
            {
                height: 72px;
                position:absolute;
                bottom:0;
                width:100%; 
            }            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">Some header</div>        
            <div class="content">Some content...</div>
            <div class="footer">Some footer</div>
        </div>
    </body>
</html>

如您所见，我只希望将页脚放在屏幕底部。问题是中间 div 扩展甚至占据页脚空间。当我删除 .content 中的 height: 100% 时，中间 div 不会扩展。

我遵循了这个论坛的很多建议甚至建议，但没有成功。

任何帮助将不胜感激，

谢谢詹姆

4

1 回答 1

0

看看这个jsFiddle看看它是否接近你所需要的。

我将您的 .content 类更改为：

.content {
    width: 100%;
    background-color: #00f;
    position: absolute;
    top: 180px; /*change according to .header height*/
    bottom: 72px; /*change according to .footer height*/
}
于 2013-07-26T08:45:15.220 回答