ホームページ > 記事 > ウェブフロントエンド > div 適応高さ問題_html/css_WEB-ITnose
div 適応高さ問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:47:211163ブラウズ
図に示すように 3 つの div が定義されています。上の div はブラウザの上部に近く、中央の空白の div は適応的な高さを持ちます。 （つまり、真ん中に残った分だけ記入します）どうすればよいでしょうか？
上下の div は私がインクルードした 2 つの HTML です
ディスカッションへの返信 (解決策)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>页面名称</title><style type="text/css">html,body { height: 100%; margin: 0; padding: 0;}.class1 { position: absolute; background-color: #f60; left: 0; top: 0; width: 100%; height: 100px;}.class2 { position: absolute; background-color: #cc0; left: 0; top: 100px; bottom: 100px; width: 100%;}.class3 { position: absolute; background-color: #f60; left: 0; bottom: 0; width: 100%; height: 100px;}</style></head><body><div class="class1"></div><div class="class2"></div><div class="class3"></div></body></html> 上下の div の高さが固定されている場合は、次のようにして中間の高さを計算できます。 js
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>页面名称</title><style type="text/css">html,body { height: 100%; margin: 0; padding: 0;}.class1 { position: absolute; background-color: #f60; left: 0; top: 0; width: 100%; height: 100px;}.class2 { position: absolute; background-color: #cc0; left: 0; top: 100px; bottom: 100px; width: 100%;}.class3 { position: absolute; background-color: #f60; left: 0; bottom: 0; width: 100%; height: 100px;}</style></head><body><div class="class1"></div><div class="class2"></div><div class="class3"></div></body></html> 真ん中に別の画像を置く場合、どうすれば div 全体を自然に埋めることができますか? 歪む可能性がありますが、div を埋める必要があります
class2 の高さ = 画面の高さ - class1 .height-class2.height
ブラウザの表示高さ: $(widow ).height()
class1 高さ: $(".class1").height()
class3 高さ: $(".class3").height ()
var class2height=$(widow).height()-$( ".class1").height()-$(".class3").height();
class2 スタイルの高さ $(" に値を代入します。 class2").css("height",class2height+"px")
真ん中に別の画像を置く場合、どうすれば div 全体を自然に埋めることができますか? 歪む可能性がありますが、div を埋める必要があります。
画像サイズが含まれるように設定されている場合、背景画像が div 全体を埋めます。
//中央の空白の div の高さを調整します
b066c680471a52d24769c1c82ce2d4d9 8ba743c9cca6ae8664f5774c82004781/ div> c379b30af9e6b65c686a5a15cdb61c0616b28748ea4df4d9c2150843fecfba68 ;div style="width:100%;height:60px;background:#ccc;position:absolute;bottom:0;"16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68