Question

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

Answer 1

你可以给那些页面提供“min-height”。虽然内容很少，页脚也会相同。因为内容区域有“min-height”

您可以查看here的“min-height”

这是示例代码;

.content {
   min-height: 600px;
}

Answer 2

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

来自the CSS Sticky Footer solution的代码示例。

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;/
}

高背位页脚后面的CSS背景黑色

2 个答案: