3

高さ 100% の div が必要で、その中に絶対配置された div があります。何らかの理由で、子 div を追加すると、親 div の高さが静的コンテンツのサイズに縮小されます。

明確にするために、絶対配置要素をフルハイトにしたくありません。含まれているdivのみ。

次のように（簡略化された）マークアップがあります。

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>

そしてスタイリング：

#content {
  min-height: 100%;
}
#dashboard {
  min-height: 100%;
  height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}

私はmin-height 100% と height 100% を入れましたが、それはうまく#contentいきます。#dashboard絶対位置の div をコメント アウトすると、どちらも画面全体の高さになります。

しかし、.widgets を追加すると、#contentまだ全高 (良い) ですが#dashboard、「テキスト」の高さだけになります。なんらかの理由で、絶対位置のコンテンツを に追加すると#dashboard、その高さが変わります。

注記 (編集)

#content他のページのコンテンツとともに成長する必要があるため、100% の高さにはしたくありません。#dashboard の高さを正確に 100% にしたいだけです。

jQueryは動くけどcssだけでやりたい

$("#dashboard").height( $("#content").height() );

また、ディスプレイのタイプをブロックまたはインラインに変更し、#content-moz-box-sizing をデフォルトに設定しようとしました。

これを修正する方法はありますか？

似ているが同じではない:絶対に配置された子(複製ではない)で親divの高さを100%に設定する方法は?

4

4 に答える 4

4

MDNから:

プロパティのパーセンテージ値は、生成されたボックスの包含ブロックの高さmin-heightに関して計算されます。包含ブロックの が明示的に指定されておらず(つまり、コンテンツの高さに依存する)、この要素が絶対位置に配置されていない場合、パーセント値は0として扱われます。height

したがって、要素のプロパティを機能させるheightには、#content要素の を明示的に指定する必要があります。min-height#dashboard

したがって、の代わりにheightプロパティを使用してみてください：#contentmin-height

#content {
  height: 100%;
}

ここにjsDiddle Demoがあります。

html, body {
    height: 100%;
}
#content {
  height: 100%;
}
#dashboard {
  min-height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}​

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>​

アップデート

#content私は常にフルサイズになりたくありません。

次に、次の固定高さを使用する必要があります#content。

#content {
  height: 200px;  /* or whatever you want */
}

#dashboard {
  height: 100%;   /* or inherit */;
}

それ以外の場合は、JavaScript を使用して必要な高さを計算し、それを#dashboard要素に適用する必要があります。

于 2012-10-17T21:27:16.340 に答える
2

絶対配置要素はレイアウトの一部ではなくなりました。親要素は、子アイテムの大きさを認識していません。

親の高さを手動で設定するか、JS を使用して子要素のサイズを計算し、それに応じて適用する必要があります。

また、高さ 100% の要素には、親要素も高さ 100% である必要があります。

body, html { height:100% }
于 2012-10-17T21:23:01.420 に答える
1

#contentのmin-heightを100％（min 100％、コンテンツが多い場合は展開）にしたい場合は、min-heightをheight: auto：と一緒に使用します。

body, html {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto;
}

さらに、私があなたの質問を正しく理解していれば、あなたは単にposition: absolute一緒に使用しtop: 0; right: 0; bottom: 0; left: 0;て、＃dashboardの高さを正確に100％にすることができます。position: relative#dashboardの高さが#contentを基準にする必要がある場合は、＃contentに追加します。

于 2012-10-17T22:39:12.220 に答える
0

絶対要素は流れから取り出されます。それらがフローから外れている場合、それらは親に高さを追加しません。

于 2012-10-17T21:25:52.320 に答える