div adaptive height problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

div adaptive height problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:47:21

Original

1190 people have browsed it

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>

Copy after login

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>

Copy after login

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