27

ご覧のとおり、コンテンツを含む 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の使用は避けたいです。

4

2 に答える 2

83

まず、あなたの場合height:100%;はどちらが間違っているかを使用しています。を使用しない理由については、この記事を参照してください。height:100%

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

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

次に、outer-div (この場合は#innerPageWrapperoverflow:hidden ) で子要素をラップするには、このラッパーで使用する必要があります。

これが正常に機能するためには、子要素は#contentMainおよび#contentSidebarの場合 と同じではなく、代わりにこれらのフロート( float:leftおよびfloat:right ) を作成し、#contentSidebar div が閉じた後に a を追加してフロートをクリアし、親がそれらを完全に包み込みます。position:absolute<div style="clear:both"></div>

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

于 2013-10-15T07:52:27.870 に答える
13

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

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;
}
于 2013-10-15T07:55:08.723 に答える