Heim > Web-Frontend > HTML-Tutorial > div自适应高度问题_html/css_WEB-ITnose

div自适应高度问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:21
Original
1174 Leute haben es durchsucht


定义了如图三个div  上面div紧贴浏览器上部 下面div紧贴浏览器下部分 想让中间空白div自适应高度(就是中间留多少填多少) 该怎么做?

上下两个div是两个html 我include包含进来的


回复讨论(解决方案)

<!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>
Nach dem Login kopieren
Nach dem Login kopieren

如果上下两个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>
Nach dem Login kopieren
Nach dem Login kopieren


如果中间再放一张图片  怎么让它自然充满整个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


设置背景图片啊,图片尺寸设置为contain就充满整个div了
background: url("url") contain contain;

//中间空白div自适应高度


    

    

    

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage