5

重複の可能性:
CSS - 100% の高さが機能しない

私は 3 つdivの sを持っています。これdiv-1は背景でdiv-2ありdiv-3、2 つのコンテナー (1 つはテキスト用、もう 1 つは写真用) です。

#div-1 {
  width: 100%;
  height: 100%;
  padding: 40px 0;
  margin: 0;
}

#div-2 {
  width: 500px;
  margin: 0;
  float: left;
}

#div-3 {
  width: 200px;
  margin: 0;
  float: right;
}
<div id="div-1">
  <div id="div-2"></div>
  <div id="div-3"></div>
</div>

これは私が得るものです：

ここに画像の説明を入力

なぜheight: 100%機能しないのですか？

4

4 に答える 4

5

を削除height: 100%;し#div-1て追加しposition: absolute;ます。それはうまくいきます。

于 2012-10-15T14:50:42.593 に答える
4

これはうまくいく

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>
于 2012-10-15T14:42:12.313 に答える
3

フローティング プロパティを要素に適用した後、明確なフローを追加する必要があります。詳細については、http ://www.quirksmode.org/css/clearing.html を参照してください。

于 2012-10-15T14:40:48.873 に答える
2

#div-1 の高さは 100% ですが、親タグの高さに依存しているため、100% はありません。CSS で体の高さを 100% に設定してみてください。

于 2012-10-15T14:42:47.210 に答える