1

ワイド スクリーンと小さなスクリーン モニターの両方で同じように表示される Web ページを作成しようとしています。私はそれを滑らかに保とうとしていましたが、その間にウェブページの右側に奇妙な空白が現れました. 奇妙なことに、空白はビューポートの外側にありますが、水平スクリーンバーが表示され、右側にスクロールすると空白が表示されます。コードはここで見ることができますhttp://jsfiddle.net/FW98q/

私の直感では、問題は次の場所にあります。

 #Navigation_Container {

    background: #3399cc;
    height: 50px;
    //width: 960px;
    //margin: 0 auto;

}

助けていただければ幸いです。

また、画面全体で一貫性を保つように Web ページのスタイルを設定する方法に関するヒント。デザインに関するコメントも大歓迎です..:)

4

4 に答える 4

2

問題が見つかりました....フッターにあるクラス'.notice'にあります...削除すると

position:absolute;

それはうまく機能します。：） 見てみな！フィドル

私はFirefoxの要素インスペクターを使用しましたが、それがページを超えて拡張されている唯一の要素であることがわかりました。

ここに画像の説明を入力してください

また、今のように絶対に下に配置する必要がある場合は、左の位置もこのように配置してください。

position: absolute;
bottom: 0px;
left:0px;

これは、left：0pxが追加された例です。

フィドル

于 2012-11-17T16:55:18.273 に答える
1 
#page_container, #Header {
    width: 960px;
}

同じ幅にしたい場合は、これら2つの要素が他の要素と同じ幅であることを確認してください。

于 2012-11-17T16:43:21.497 に答える
0

あなたのCSSに追加

body{margin:0;}

于 2012-11-17T20:53:02.100 に答える
0

// CSS では機能せず、div の 1 つを閉じていません。内容そのものだと思います。3 つの異なるフッター div があるのはなぜですか? あなたのマークアップは複雑すぎて、これら 3 つすべてを組み合わせて同じ効果を得ることができます。

ナビゲーション コンテナーからそれを取り出すと空白が修正されますが、少なくとも 1 つの別の場所でそれを行っています。

于 2012-11-17T16:44:07.793 に答える