8

ブラウザー ウィンドウが小さくて水平スクロール バーが必要な場合、右にスクロールすると、ヘッダーの背景色がブラウザーの端の手前で終了します。私はcssクラスを使用しています。

.s_header {
    margin: 0;
    width: 100%;
    display: block;
    border-bottom: 1px solid #000;
    background-color:#b8dbec;
    height:133px;
}

のコンテンツは、<div class="s_header">その下の 4 列のテーブルほど幅が広くありません。コンテンツの合計は、画像幅 + パディングと 140 ピクセルの固定幅の列で約 840 ピクセルになります。したがって、ブラウザ ウィンドウが 840px 未満の場合、水平スクロール バーが表示されますが、スクロールするとヘッダーの背景が切り取られます。

の親要素<div class="s_header">は body と html で、100% 幅はウィンドウの幅を意味します。私はオーバーフローを含めようとしました:.s_header成功せずにクラスに表示されます.

ボディ幅も100%マージン0に設定

スクロールバーが表示されたときに背景を右側に拡張する簡単な方法はありますか?

問題ページはこちら

どんな提案でも大歓迎です。

4

5 に答える 5

11

body タグの余白を設定する

インラインのやり方

<body style="margin: 0px 0px 0px 0px;">

あなたのstyle.css（または何でも）

body {
  margin: 0px 0px 0px 0px;
}
于 2009-07-22T17:52:35.753 に答える
1

firefox を使用して firebug をインストールすることを心からお勧めします: http://getfirebug.com/

dom 要素を検査できるこのクールな機能があり、すべてのスタイルと、それらがどのスタイルシートに由来するかを教えてくれます。したがって、ボディが誤ったパディング (または何か) を継承している場合、何が起こっているかを視覚的に確認できます:-)

于 2009-07-22T17:51:14.540 に答える
0

より簡単な方法は、内側のdivを作成し、スクロールバーが表示される直前のページと同じ幅に設定することです。

<div class="s_header"> <div class="inner">

</div> </div>

.inner{
  width:990px;
  background:#f00;
  margin:0 auto;
}
于 2009-07-23T10:50:26.997 に答える
0

問題はボディテーブルの3つの画像にあるようです。ブラウザの幅を狭くすると、3つの画像がまとまり、個々のテーブルセルに表示されるため、折り返すことができず、幅が固定されます。

ヘッダーに繰り返し背景画像を使用して解決策を曖昧にすることもできますが、フローティングアプローチを使用してテーブル構造を書き直します。

于 2009-07-23T10:59:34.640 に答える
0

私の[非常に単純な][そしておそらく醜い]解決策：

  1. body タグの min-width プロパティを 100% に設定します。
  2. min-width100% 幅のプロパティと次の計算に基づくプロパティを定義する minwidth クラスを定義します。
    • font-size を 100% に設定したら、ブラウザでピクセルへの変換を確認します。
    • 最近の 17 インチ モニターの標準解像度 1440px 幅を、このピクセル 1em フォント サイズの結果で分割します。
    • em で表される最小幅プロパティをこの結果に設定します。
    • 例: font-family: 'Gill Sans MT', sans-serif; 100% のサイズでは 16px のフォントになります。
      1440/16 = 90
      CSS は次のようになります。
      html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

最後に 3. .minwidth100% 体のサイズの幅が必要なすべての体の年長の子供にクラスを適用します。

ブラウザ ウィンドウのサイズを変更するか、解像度を変更してください。1440*900 までのすべての画面解像度で、この厄介な問題を解決する必要があります。

私が助けてくれることを願っています

于 2012-03-28T16:14:32.210 に答える