Question

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

我有这个简单的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中的100％时，中间div不会扩展。

我已经跟随了很多建议甚至来自这个论坛的建议，但没有成功。

非常感谢任何帮助，

由于海梅

Answer 1

看看这个jsFiddle，看看它是否接近你需要的东西。

我将你的.content类改为：

.content {
    width: 100%;
    background-color: #00f;
    position: absolute;
    top: 180px; /*change according to .header height*/
    bottom: 72px; /*change according to .footer height*/
}

如何根据兄弟DIV和容器扩展DIV元素

1 个答案: