ホームページ > ウェブフロントエンド > htmlチュートリアル > 実装方法: 上の div はコンテンツに応じて自動的に高くなり、下の div は残りの高さを自動的に埋めます_html/css_WEB-ITnose

実装方法: 上の div はコンテンツに応じて自動的に高くなり、下の div は残りの高さを自動的に埋めます_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:21:58
オリジナル
1899 人が閲覧しました

上部と下部の div を満足させる純粋な div+css の方法はありますか: 上部の div はコンテンツに応じて自動的に高くなり、下部の div は残りの高さを自動的に埋めます


ディスカッションへの返信 (解決策)

私も知りたいです、専門家の回答を待っています!

CSS3 のフレキシブル ボックス モデルは、純粋に div+css を使用して必要な効果を実現できます。例:

<!doctype html><html>	<head>		<title>Temp Web Page</title>		<style type="text/css">			body *{border:1px solid}						#container{ width:200px; height:400px;			    display: -moz-box;				display:-webkit-flex; 				display: -ms-flexbox;								-moz-box-orient: vertical;				-webkit-flex-direction:column;				-ms-flex-direction:column;			}			#inner1{ background:#ddd; }						#inner2{  background:#aaa; 			    -moz-box-flex: 1;			    -webkit-flex:1;				-ms-flex:1;			}		</style>			</head>	<body>		<div id="container">			<div id="inner1">			When you come to the end of a perfect day. It can only mean a tired heart, and the dear friends have to part.			</div>			<div id="inner2"></div>		</div>	</body></html>
ログイン後にコピー


現在サポートされているブラウザには、IE10 およびそれ以降のバージョンの FireFox、Chrome などが含まれます。



わかりません。残りの高さはどれに対するものですか?上下の 2 つの div は兄弟要素ノードとして関連付けられていますか?

わかりません。残りの高さはどれに対するものですか?上下の 2 つの div は兄弟要素ノードとして関連付けられていますか?

残りの高さは親コンテナに対する相対的なものです。

幅と高さを直接 100% に設定するだけでは十分ではないでしょうか。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート