0

100%ページのヘッダーがあり、が必要background-colorです。次に、コンテンツdivを中央に配置し、幅に沿っdivて広告用に右側に追加します。

すべてのコンテンツと広告が表示されないようにウィンドウを縮小するとbackground-color、ビューポートの外側にあった部分のヘッダーが緩むことを除いて、水平スクロールがうまく機能します。どうすればbackground-color完全に実行できますか？

簡単な解決策は、background-color代わりにボディの上部を設定することですが、将来のフッターにも同じデザインが必要になります。ブラウザのサポートの問題により、複数の背景を使用することはできません。

サンプルページ：http ：//niklasholmberg.se/test.html

4

4 に答える 4

2

他の人が指摘しているように、ここで問題となるのは、「右」の列が通常のフローから外されているため、実際には「ページ」の一部ではないということです。ブラウザは、「頭」の右端まで背景をペイントしないという点で（IMO）正しいです...しかし、ページ境界の外側にあるときに右の列をスクロールして表示することさえできるという点で（再びIMO）間違っています。

ボビーのオーバーフローを非表示に設定すると、背景の問題が解決されます...しかし、もちろん、そのように広告主を満足させることはできません:)

提案

多分それはあなたが必要とするものを手に入れるのに十分です：

        #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

あなたが抱えている問題は、バックグラウンドが完全に実行されていないということではないと思います。これは、rightを使用してコンテンツDIVのサイズが変更されていることです。-200px; これにより、コンテンツDIVが本来よりも200ピクセル大きくなり、BODYの外に押し出されます。

#rightをright：0pxを使用するように設定した場合; 問題はもう存在しません。しかし、それがあなたのニーズに正しく合うかどうかはわかりません。

V。

于 2012-11-09T09:40:21.107 に答える
0

min-widthの値を設定します#head。私の解決策では、それは完全に機能していmin-width:1102pxます。

これを試してみてください。

于 2012-11-09T10:17:35.163 に答える
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 に答える