0

我认为这将相当简单，但我一直无法找到解决方案。我想要一个包含 2 个 div 的布局来填充浏览器窗口。它们将是 100% 的宽度，并且一个在另一个之上。底部 div 必须具有固定的高度，顶部 div 将填充其余空间。我希望解决方案：

  • 仅使用 CSS（无 Javascript）
  • 与 IE7+ 兼容（例如无 CSS 计算）
  • div之间没有重叠
  • 如果顶部 div 的内容不适合布局，则垂直滚动

我尝试了以下方法，但 margin-bottom 似乎没有效果，因此两个 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 重叠。这是否像看起来那么难，还是我错过了什么？任何见解将不胜感激！

4

3 回答 3

2

你试过这个吗？

* {
    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/

于 2013-09-24T03:07:14.517 回答
0

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

于 2013-09-24T03:08:18.580 回答
0

粘性页脚与粘性页眉几乎相同。

将#footer 设置为位置：静态。可能需要添加left:0px；

#content 使用 padding-bottom:40px 代替 margin-bottom，然后设置 box-sizing:border-box。边框框在总尺寸中包括填充（和边框，因此得名）。您的 div 仍将重叠，因此将 #footer tm 与 z-index:99 叠加；和 #content 与 z-index:-1;。填充将防止内容重叠，#footer 的背景将隐藏其余部分。
如果边界框对您的内容大惊小怪，只需添加一个带有边界框的内部 div 以再次调整填充。

于 2013-09-24T03:46:33.420 回答