div要素のいくつかが水平に切り取られているのはなぜですか？

私はいくつか（私が思うもの）はかなり奇妙な行動であることを発見しました。このコードを取る：div要素のいくつかが水平に切り取られているのはなぜですか？

<body style="background-color:#1b1b1b"> 
    <div style="width:100%;height:1px;background-color:#f00" /><br /> 
    <div style="width:1300px;height:300px;background-color:#fff;margin: 0 auto;" /> 
</body>

私は長い間、Web開発を行っていないが、私はその最初のdivは関係なく常にIリサイズどのくらい、ページの幅全体にないだろうと思っただろうブラウザのウィンドウで行います。しかし、ブラウザウィンドウの幅をブラウザウィンドウの幅より小さくして、ブラウザの幅がブラウザの幅よりも小さくなると、（1300px）とスクロールすると、width:100%と思われる上位divが切り捨てられているようです。私は、この動作を記録しました：

http://i.imgur.com/5bFIj0O.gifv （それについては申し訳ありませんが埋め込まれていない、gifvファイル形式は、ここでサポートされていないようです。）

任意の提案は、この問題に（それはおそらく私が思うことをずっと簡単です）？

出典

2017-03-18 carefulnow1

'幅のdiv要素とdiv要素にoverflow-x: scroll;を追加することができます：100％'含む100％になるだろう要素、これは 'body'です。デフォルトでは、 'body'の幅はビューポートの幅と一致します。したがって、 'body'はビューポートと同じ幅であり、' width：100％ 'のdivは同じ幅になり、' width：1300px'の内側divは両方の外側にあふれます。そのため、赤い線はビューポートの幅で切り取られます。 'overflow：hidden'を' body'または 'width：100％'のdivに追加すると、1300pxの幅のdivからオーバーフローが見えなくなります。 –

水平スクロールが必要な場合はどうすればよいですか？下位の「div」にコンテンツがあったとします。 – carefulnow1

あなたは正確に何をしようとしていますか？上のdivが単なる行であると想定されている場合は、border-top属性を親要素（例では）に追加することができます。 – Tacud

width：100％のdivは、bodyである包含要素の100％になります。デフォルトでは、ボディの幅はビューポートの幅に一致します。したがって、bodyはビューポートと同じ幅になり、width：100％のdivは同じ幅になり、width：1300pxの内側divは両方の外側でオーバーフローします。そのため、赤い線はビューポートの幅で切り取られます。オーバーフロー：hiddenをbodyまたはwidth：100％のdivに追加した場合、1300pxの幅のdivからのオーバーフローは表示されません。あなたは、水平スクロールが必要な場合

、あなたがwidth: 100%;

<body style="background-color:#1b1b1b"> 
 
    <div style="width:100%;border-top: 1px solid #f00;padding-top: 1em; overflow-x: scroll;"> 
 
    <div style="width:1300px;height:300px;background-color:#fff;margin:auto;">foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo </div> 
 
    </div> 
 
</body>

出典

2017-03-18 16:39:17

div要素のいくつかが水平に切り取られているのはなぜですか？

答えて

関連する問題