コンテナdivは子divに適合しないように展開されます（浮動小数点数なし）

Question

コンテナdivは、上位20pxの値を持つ子divに適合するように展開されません。 私はフロートを持っていないし、オーバーフロー：隠し（子divの一部を切り取る）またはオーバーフロー：自動（スクロールバーを作成する）の両方を使用しています。 Codepen

<div class="container"> 
<div id="model">fdsf</div> 
</div> 

は、この問題への解決策を感謝：

はcodepen例を参照してください。

Answer 1

topとpositionプロパティを削除し、あなたの例ではmargin: 10px auto 0 auto;

#model { 
    background: yellow; 
    border: 1px solid orange; 
    width: 100px; 
    height: 100px; 
    margin: 10px auto 0 auto; 
    display: block; 
} 

Demo

Answer 2

1）を使用し、コンテナが正しく子divに合うように拡大しています。子供の身長は100pxに1pxの境界の2倍、合計102pxです。それで、ブラウザの高さは正確に102ピクセルです。ブラウザの開発ツールがあなたに伝えることができます。

内容の高さは102pxなので、容器の内側の高さは102pxです。これは定義上「内容に合わせて拡大する」ことです。

2）ここで、あなたの子divにposition: relativeを設定しています。 Mozilla Developer Networkからの次の引用は、あなたの例で起こっていることを完全に説明するべきです。

相対位置：

このキーワードは、要素が 配置されていなかったかのようにすべての要素をレイアウトし、次に レイアウトを変更する（したがってそれ要素の隙間を残すことなく、要素の位置を調整します は置かれていませんでした）。 table - * - group、table-row、table-column、table-cell、table-captionの 要素のposition：relativeの効果は未定義です。明らかに

3） 、あなたは相対的な位置決めを退治する、とだけではなく、marginを使用することで、この効果を取り除くことができます。あなたのコメントに関しては、いいえ、top、right、bottom、およびleftは絶対に動作しません。それらは、上の引用が何を説明するのかについて、まったく異なるもののために使用されることを意図しています。