Heim > Artikel > Web-Frontend > div自适应高度问题_html/css_WEB-ITnose
div自适应高度问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:211158Durchsuche
定义了如图三个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> 如果上下两个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
设置背景图片啊，图片尺寸设置为contain就充满整个div了
background: url("url") contain contain;
//中间空白div自适应高度
Stellungnahme：
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
Vorheriger Artikel：【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧_html/css_WEB-ITnoseNächster Artikel：关于前台控件布局的问题_html/css_WEB-ITnose