Home >Web Front-end >HTML Tutorial >div adaptive height problem_html/css_WEB-ITnose
div adaptive height problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:211182browse
Three divs are defined as shown in the figure. The upper div is close to the upper part of the browser. The lower div is close to the lower part of the browser. What should I do if I want the middle blank div to adapt to the height (that is, fill in as much as is left in the middle) ?
The upper and lower divs are two html that I included
Reply to the discussion (solution)
<!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> If the height of the upper and lower divs is fixed, you can calculate the middle height with 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> If you put another picture in the middle, how to make it natural Filling the entire div can be distorted, but it must be filled with this div
The height of class2 = the height of the screen-class1.height-class2.height
The visible height of the browser: $(widow).height()
class1 height: $(".class1").height()
class3 height: $(".class3").height()
var class2height=$(widow).height()-$( ".class1").height()-$(".class3").height();
Assign value to class2 style height $(".class2").css("height",class2height "px")
If you put another picture in the middle, how do you make it naturally fill the entire div? It can be distorted, but it needs to fill the div.
Set the background image. If the image size is set to contain, it will fill the entire div.
background: url("url") contain contain;
//Adaptive height of blank div in the middle
802f898ab4eb7b2fd788d3555e7a3104
7b7d79dddc1d06b115f86435fd5c42cd16b28748ea4df4d9c2150843fecfba68
6e2b45ddc35f61b6f832bb1e8cf45b7516b28748ea4df4d9c2150843fecfba68
909adb681a8bf6fd13855922ab6788d916b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68