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

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

css

高位页脚后面的CSS背景黑色,css,Css,我有一个设置高度的页脚div，填充屏幕底部，100像素宽，黑色背景，它位于身体背景图像上。有几页内容不多。页脚在页面上升起，因为它有一个固定的高度，所以在页脚下可以看到主体BG图像。我如何使用CSS来确保凸起页脚下的整个屏幕是黑色的，而不必扩展页脚div的设置高度？您可以为具有“最小高度”的页面指定“最小高度”。因此，尽管内容很少，页脚将是相同的。因为内容区域具有“最小高度” 您可以查看“最小高度” 下面是示例代码 .content { min-height: 600px; } 有一些已

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

您可以为具有“最小高度”的页面指定“最小高度”。因此，尽管内容很少，页脚将是相同的。因为内容区域具有“最小高度”

您可以查看“最小高度”

下面是示例代码

.content {
   min-height: 600px;
}

有一些已发布的解决方案。它们的核心似乎都是对一个块级元素应用最小高度（包括IE早期版本的一些技巧），该元素封装了所有非页脚内容，并且具有与页脚高度相等的填充。然后，页脚的高度和负上边距被显式设置（设置为与包装的底部填充相同的值）

代码示例来自

HTML:

代码中的文件太多。这里有一个链接：这需要一些JS来识别屏幕分辨率…必须有一种方法来填充屏幕底部。一直在尝试：在我不想让页脚变粘后，我们很高兴它向上移动到高位，但页脚下的背景需要填充黑色。

<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>

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