12

私はスタイルを設定しました<html>：

html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

ページのコンテンツがページよりも広い場合、境界線が停止するのに背景が表示され続けるのはなぜですか？

問題を示すフィドルは次のとおりです：http：//jsfiddle.net/rPGyc/3

4

3 に答える 3

8

htmlbodyは、p、 、 などと同様に、適切なブロック レベルの要素divです。したがって、他のブロック要素と同じオーバーフロー ルールをすべて順守します。

ただし、htmlコンテンツが幅を超えた場合 (またはその幅がブラウザー ウィンドウまたはビューポートの 100% 未満の場合) の背景が境界線を越えてブリードする理由は、背景色がビューポートに伝達されるためです。レンダリングされるキャンバスhtmlとそのすべてのコンテンツを含みます。ただし、境界線はhtml要素の一部のままであるため、コンテンツがオーバーフローしても要素は拡張されません。この動作は、仕様のこのセクションを引用するこの回答で説明されているように、 に背景を適用する方法と非常に似ていますがbody、 ではなくhtml、ボディの背景がルート要素に伝播します。

Alohciが回答の下のコメントで指摘して いるように、ビューポートに関しても同じことが当てはまります。html

html は、body が html に対して動作するのとほぼ同じようにビューポートに対して動作することに注意してください。背景は html 要素の範囲を超えてエスケープされます。http://jsfiddle.net/GmAL4/4/を参照して、私の意味を確認してください。

于 2012-06-18T15:21:42.390 に答える
0

それを防ぐ方法は、css3 word-wrap プロパティを使用することです。ここでJsfiddle

追加するだけです：

html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
于 2012-06-18T15:25:46.470 に答える