web-dev-qa-db-ja.com

親divが子供の高さまで拡大していない

ご覧のとおり、コンテンツを含むdivを囲むdiv（#innerPageWrapper）があります。 #innerPageWrapperは、レイアウト内で半透明の境界線として視覚的にも機能します。

私の問題は、#innerPageWrapperが内部の子に収まるように拡張されず、ページの残りを埋めるために拡張されるのは言うまでもないことです。

これは#innerPageWrapperのコードです

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

私は多くのことを試してみました（divの高さにcalc（）を使用することを含む）。 jQueryの使用を避けたい。

csshtmlheightexpand
22
Andrew Mihelakis

まず、あなたはheight:100%;を使用していますが、これはあなたのケースではが間違っています。 height:100%を使用しない理由については、 this article;を確認してください。

理由を理解するには、ブラウザーが高さと幅をどのように解釈するかを理解する必要があります。 Webブラウザーは、ブラウザーウィンドウが開いている幅の関数として、利用可能な合計幅を計算します。ドキュメントに幅の値を設定しない場合、ブラウザーはウィンドウの幅全体を埋めるようにコンテンツを自動的に流します。

ただし、高さの計算方法は異なります。実際、コンテンツがビューポートの外に出るほど長くないため（スクロールバーが必要）、Webデザイナーがページ上の要素に絶対高さを設定しない限り、ブラウザーは高さをまったく評価しません。それ以外の場合、ブラウザはコンテンツが最後まで表示ポートの幅内で流れるようにします。高さはまったく計算されません。この問題は、親要素の高さが設定されていない要素に高さの割合を設定すると発生します。つまり、親要素のデフォルトの高さはauto;です。実際には、未定義の値から高さを計算するようにブラウザーに要求しています。それはヌル値に等しいため、結果はブラウザが何もしないということです。

次に、outer-div（この場合＃innerPageWrapper）を子要素にラップさせるには、このラッパーでoverflow:hiddenを使用する必要があります。

これが正常に機能するためには、＃contentMainおよびのように、子要素は not がposition:absoluteでなければなりません#contentSidebar、代わりにこれらを作成するfloats（float：leftandfloat：right ）そして＃contentSidebardivが閉じた後、<div style="clear:both"></div>を追加してフロートをクリアし、親がそれらを完全にラップできるようにします。

this Pastebinに必要なCSSを配置しました。上記のようにdivを使用してフロートをクリアする必要があることに注意してください。

78
BrownEyes

親要素の幅と高さを自動に設定してみてください。簡単な例：

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper {
    width:auto;
    height:auto;
    background:red;
}

#innerPageWrapper p{
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;
}

編集：

水平および垂直中心を含む、より高度な例については、このフィドルを確認してください。 http://jsfiddle.net/kimgysen/8nWDE/1/

親要素は、子要素の境界に動的に適応します。
子要素に動的な幅と高さを設定することもできます。

.outerDiv{
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv{
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;
}
9
Trace