Question

我认为这很简单，但我找不到解决办法。我想要一个带有2个div的布局来填充浏览器窗口。它们是100％宽度，一个在另一个上面。底部div必须具有固定的高度，顶部div将填充剩余的空间。我想解决方案：

仅使用CSS（无Javascript）
与IE7 +兼容（例如，没有CSS calc）
div之间没有重叠
如果顶部div的内容不适合布局

我尝试了以下但是边距底部似乎没有效果，因此两个div重叠（如半透明背景所示）：

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body, html {
        height: 100%;   
    }
    #content {
        height: 100%;
        width: 100%;
        overflow: auto;
        background: rgba(255,0,0,0.5);
        margin-bottom: 40px;
    }
    #footer {
        width: 100%;
        height: 40px;
        position:absolute;
        bottom: 0;
        background: rgba(255,0,0,0.5);
    }
</style>
</head>
<body>
    <div id="content">
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>last line of content</p>
    </div>
    <div id="footer"></div>
</body>
</html>

JSFiddle

我已经看到了粘性页脚的几种解决方案，但它们似乎都有div重叠。这看起来很难，还是我错过了什么？任何见解将不胜感激！

Answer 1

你试过这个吗？

* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;   
}
#content {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto;
    background: rgba(255,0,0,0.5);
    margin-bottom: 40px;
}
#footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background: rgba(255,0,0,0.5);
}

http://jsfiddle.net/9Zhaa/5/

Answer 2

尝试将您的页脚和内容设置为position: relative;并删除margin-bottom:40px。

Answer 3

粘性页脚与粘性标题几乎相同。

将#footer设置为position：static。可能需要添加左：0px;

而不是margin-bottom使用padding-bottom：#ptent为40px，然后设置box-sizing：border-box。边框包括总尺寸中的填充（和边界，因此名称）。你的div仍然会重叠，所以#footer tm的层与z-index：99;和#content with z-index：-1;。填充将阻止内容重叠，＃footer的背景将隐藏其余内容如果边框与您的内容过多融合，只需添加带有边框的内部div即可再次调整填充。

当一个固定高度时，CSS使两个垂直堆叠的div填充视口

3 个答案: