図に示すように 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> 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 を埋める必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
