0

我有一个页眉，100%应该有一个background-color. div然后我将我的内容 div 居中并沿宽度向右侧额外放置广告。

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

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

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

4

4 回答 4

2

正如其他人指出的那样，这里的问题在于您的“右”列已脱离正常流程，因此实际上不是“页面”的一部分。浏览器（IMO）正确地没有将背景一直绘制到“头部”的右侧......但是（再次IMO）错误的是，甚至允许您在页面边界之外滚动查看正确的列。

如果您将 boby 上的溢出设置为隐藏，您就可以解决背景问题......但是当然，您不会让广告商高兴 :)

建议

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

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

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

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

于 2012-11-12T07:45:27.737 回答
0

设置 的min-width值#head。对于我的分辨率，它与min-width:1102px.

试试这个。

于 2012-11-09T10:17:35.163 回答
0

我认为您遇到的问题不是后台没有一直运行。这是因为您使用 right:-200px; 正在调整内容 DIV 的大小；这实际上使内容 DIV 比应有的大 200px，将其推到 BODY 之外。

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

五。

于 2012-11-09T09:40:21.107 回答
0

进一步了解@Martin Westin 的答案，使其动态地适用于任何大小的窗口：我在需要背景一直延伸的标题中添加了一个 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();
});
于 2013-11-13T18:58:07.170 回答