親 div が伸びていないのですが、どうすれば解決できますか? _html/css

親 div が伸びていないのですが、どうすれば解決できますか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:22:20

オリジナル

2239 人が閲覧しました

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title></title>	<style type="text/css">		html, body {			width: 100%;			height: 100%;			margin: 0px;			padding: 0px;		}		#div1 {			width: 80%;			height:100%;			margin: 0px auto;			padding: 0px;			background-color: #b0ffdd;		}	</style></head><body>	<div id="div1">		<div id="div2" style="width: 90%; height: 1200px; background-color: #dcb1ef; margin: 0px auto;">		</div>	</div></body></html>

ログイン後にコピー

上記の例では、高さ: div1 の 100% を維持しながら、div2 が div1 を開くことを許可できますか?

ディスカッションに返信（解決策）

デフォルトでは引き伸ばされます

height:100% に設定しないか、height:auto、

に設定します100%。。。どうやって開けますか、、、すでに開いています。。。

いいえ、height:100% は現在のウィンドウの高さです、#div1 height:auto;

height:auto; が設定されている場合、div1 内の高さを設定するためにパーセンテージを使用することはできません。

実際のアプリケーションでは、div2 の高さは不確実であり、高さはパーセンテージを使用して設定される場合があります。望ましい効果は、div2 が小さい場合は div1 が画面いっぱいになり、div2 が大きい場合は div1 が div2 と同じ大きさになるように引き伸ばされることです。

必要なのは min-height:100 を設定することです

元の設定は #div1 min-height:100%; で、これで目的の効果を実現できますが、div1 の内部要素の高さをレイアウトすることはできませんパーセントなので変更したいと思います。

現在のジレンマは、高さを 100% に設定すると開くことができず、内部要素のレイアウトを設定しないと影響を受けることです。

CSS だけではできないのではないかと疑問ですか?

#div の下にパーセンテージレイアウトが必要な要素を取り出して、別の div.height:100% レイヤーを作成します。このレイヤーは #div と重なることができます (先ほど取り出した要素を入れます)

別の div は次のようになります。まだまだ効果を実感するのは難しいです。

divの高さが設定されている場合（自動ではない）、子要素によってそれを伸ばすことはできませんか？以前はIE6で開いていたようです