Question

我有一个页面100%的标题，应该有一个background-color。然后，我的内容div居中，宽度为广告右侧额外div。

当缩小窗口以便所有内容+广告都没有显示时，我有一个水平滚动条，除了标题丢失了视口外部分的background-color之外，它的效果很好。如何让background-color一直运行？

一个简单的解决方案是在主体上设置顶部background-color，但我们希望在未来的页脚上使用相同的设计。由于浏览器支持问题，我们无法使用多个背景。

示例页面：http://niklasholmberg.se/test.html

Answer 1

正如其他人所指出的那样，这里有问题的是你的“正确”列被从正常流程中删除，因此实际上并不是“页面”的一部分。浏览器（IMO）是正确的，不会在“头部”中向右侧绘制背景......但是（再次IMO）错误甚至允许您滚动以在页面边界之外看到右列。

如果你将boby上的溢出设置为隐藏，你可以解决背景问题...但当然你不会让广告商这样开心：）

建议

也许这足以得到你所需要的东西：

        #fakebg {
        position:absolute;
        top:0;
        width:1102px;
        background:#000;
        margin:0;
        z-index:-1;
    }

http://jsfiddle.net/Mfsx6/1/

总结：我在头部添加了一个虚拟div，其偏移位置与右列相同。这为我们提供了一个表面来添加背景。

Answer 2

我认为你遇到的问题不是背景不能一直运行。这是因为你使用右边的内容DIV正在调整大小：-200px;这基本上使得内容DIV 200px比它应该更大，将它推到了BODY之外。

如果你设置#right使用权限：0px;问题不再存在。我不确定这是否能正确满足您的需求。

诉

Answer 3

设置min-width的{{1}}值。对于我的决议，它与#head完美配合。

试一试。

Answer 4

进一步了解@Martin威斯汀的答案，让它适用于任何大小的窗口：我在标题中添加了一个id =“full-width-bg”的div，我需要将背景拉伸到所有方向。 Custom.Toolbox.getFullWidth（）获取DOM的实际大小，无论它是否在视口中，因此它包括溢出和页面的整个宽度。然后我们将＃full-width-bg的宽度设置为全宽。

window.Custom = window.Custom || {};

Custom.Toolbox = {
    init: function(){
        Custom.Toolbox.fixBG('#full-width-bg');
        jQuery( window ).resize(function() {
            Custom.Toolbox.fixBG('#full-width-bg');
        });
    },
    getFullWidth : function(){
        return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
    },
    fixBG : function(selector){
        jQuery(selector).css('width', Custom.Toolbox.getFullWidth() + 'px');
    }
}

jQuery(function(){
    Custom.Toolbox.init();
});

滚动时背景不显示在100％宽度div上

4 个答案:

建议