3

ページを70〜30％の比率で埋めるために、2 divのサイズを設定しようとしています。

「html、body」のサイズを設定せずに、divを正しい高さに表示するにはどうすればよいですか。

現在、テキストの高さの 2 つの単一行が表示されます。ありがとう

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>

<body>
<div style="overflow: hidden; clear: both;">
    <div style="background-color: blue; height: 70%;">Top</div>
    <div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>

</html>
4

4 に答える 4

0

position: absolute親にを追加しdiv、その後それを伸ばして、幅と高さを完全にすることができます。width: 100%ブロックレベルの書式設定コンテキストを適用するには、宣言が重要であることに注意してください。

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>

これがフィドルです

これにより、この div が「通常のフロー」から削除され、兄弟要素が不明瞭/不明瞭になることに注意してください。CSS 2.1 仕様では、次のアドバイスが提供されています。

...絶対配置された要素のコンテンツは、他のボックスの周りを流れません。重なっているボックスのスタック レベルによっては、別のボックスの内容が隠れる (またはそれ自体が隠れる) 場合があります。

于 2013-08-15T14:01:50.650 に答える