ホームページ > 記事 > ウェブフロントエンド > 親 div が伸びていないのですが、どうすれば解決できますか? _html/css_WEB-ITnose
親 div が伸びていないのですが、どうすれば解決できますか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:202154ブラウズ
<!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の高さが設定されている場合（自動ではない）、子要素によってそれを伸ばすことはできませんか？以前はIE6で開いていたようです