0

我有一个设置高度的页脚 div，它填充屏幕底部，100px 宽，黑色背景位于身体背景图像上。有几页内容不多。页脚在页面上升，因为它有一个固定的高度，所以在页脚下你可以看到身体 BG 图像。我将如何使用 CSS 来确保凸起页脚下方的整个屏幕是黑色的，而不必扩展页脚 div 的设置高度？

4

2 回答 2

0

对此有一些已发布的解决方案。它们的核心似乎都是将最小高度（包括针对早期版本的 IE 的一些技巧）应用于包含所有非页脚内容并具有等于页脚高度的填充的块级元素。然后，页脚明确设置其高度和负上边距（与包装器的底部填充相同的值。

CSS Sticky Footer 解决方案中的代码示例。

HTML：

<body>
    <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
    <![endif]-->

    <div id="wrap">
        <div id="main">
        </div>
    </div>

    <div id="footer">
    </div>
</body>

CSS：

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
于 2012-04-25T19:45:41.297 回答
0

您可以为页面赋予“最小高度”。因此，虽然内容很少，但页脚将相同。由于内容区域具有“最小高度”

您可以在这里查看“最小高度”

这是示例代码；

.content {
   min-height: 600px;
}
于 2012-04-25T19:43:25.743 回答