1

たとえば、Twitter ブートストラップhttp://twitter.github.com/bootstrap/index.htmlのメイン ページを見てみましょう。

ブラウザ ウィンドウのサイズを 400px に変更すると、右側に奇妙なスペースが表示されます (図を参照)。

ここに画像の説明を入力

別のサンプルは StackOverflow です。ブラウザーで、背景が灰色のヘッダー行のサイズを変更しても、すべての画面に合わせてサイズ変更されません (以下を参照)。

ここに画像の説明を入力

body がブラウザー ウィンドウの 100% にサイズ変更されないのはなぜですか? 私のサイトにも同様の問題があります

4

1 に答える 1

5

この問題は、ブラウザー ウィンドウをコンテンツの最小幅よりも小さくし、水平方向にスクロールすると発生します。幅 100% に設定された要素は、横方向にスクロールするまでは幅の 100% です。

解決策は、これらの要素に a を設定しmin-widthて、少なくともコンテンツと同じ幅になるようにすることです。

次に例を示します。

HTML

<div id="header1">Broken header</div>
<div id="header2">Fixed header</div>
<div id="content">
  content goes here.
</div>

CSS

#header1 {
  background-color:#ccc;
  border: 2px solid #00F;
}

#header2 {
  background-color:#ddd;
  min-width: 600px;
  border: 2px solid #0F0;
}

#content {
  width: 600px;
  border: 2px solid #F00;
}

デモ

同様の質問:

于 2012-11-03T23:25:42.467 に答える