上部と下部の 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>
わかりません。残りの高さはどれに対するものですか?上下の 2 つの div は兄弟要素ノードとして関連付けられていますか?
わかりません。残りの高さはどれに対するものですか?上下の 2 つの div は兄弟要素ノードとして関連付けられていますか?
残りの高さは親コンテナに対する相対的なものです。