1

次の CSS を使用して、ヘッダーとセクションの幅を取得しています。

header {
width: 100%;
height: 60px;
    padding:60px;
    float:left;
    background: url('extras/header.jpg') repeat-x;
}

section {
width: 100%;
float: left;
    padding:20px 60px;
height:760px;
    background: url('extras/body.jpg') repeat-x;
}

IE、Chrome、および FF では、デザインが水平方向に引き伸ばされ、X 軸のスクロールバーが生成されます。1300px以上の解像度でも。

誰でも理由がわかりますか？さらにコードを指定する必要がありますか?

ありがとう

4

3 に答える 3

2

パディングは常に、定義した幅で追加されます。したがって、実際には、コンテナは css ファイルから 100%+120px の幅を取得します。したがって、幅を 100% 未満に減らします。

于 2012-06-19T09:53:57.893 に答える
1

2 つの div を使用して、外側の div にパディングを設定できます (ヘッダーとセクションからもパディングを削除してください)。そのように：

header {
    width: 100%;
    height: 60px;
    /* padding:60px; */ /* Move it to outer div */
    float:left;
    background: url('extras/header.jpg') repeat-x;
}

.section {
    width: 100%;
    float: left;
    /*padding:20px 60px;*/ /* Move it to outer div */
    height:760px;
    background: url('extras/body.jpg') repeat-x;
}

<!-- And in your code: -->
<div style="padding: 60px;">
   <div class="header">
      <p>Content here</p>
   </div>
</div>
于 2012-06-19T10:17:49.907 に答える
0

width-padding-margin-doodahs-demwutwuts を計算する数学に関心を持ちたくない場合は、headersとを宣言sectionsしてbox-sizing: border-box、最終的にレンダリングされたボックスが宣言された幅になり、パディングがカットされます。箱の中。より詳しい情報

于 2012-06-19T10:58:50.950 に答える