如何让div充满整个页面的一个问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:54:11
Original
1560 Leute haben es durchsucht

nbsp;html>














有上面这样的页面,div2高度的高度不确定,想实现两个效果:
①div2高度比较小的时候,div1充满整个页面
②div2高度比较大的时候,div1也被撑大

上面的代码只实现了效果①,效果②达不到(如高度=1500px),请问通过修改css能够同时实现①②两个效果吗?


回复讨论(解决方案)

效果②(清除浮动就行):

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">html, body, #div1 {width: 100%;margin: 0px;padding: 0px;}</style></head><body><div id="div1" style="background-color:aquamarine;">    <div id="div2" style="width: 95%; height:1500px; margin: 0px auto; background-color: red; overflow:hidden;">    </div></div></body></html>
Nach dem Login kopieren

但这样就不能兼顾效果1了。
实际应用是想做个网页模板,div2放内容,高度不确定,当内容较少时希望div1能充满整个页面;内容多时div1被撑开。
所以希望同时兼顾两种效果。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">html, body{	width: 100%;	height: 100%;	margin: 0px;	padding: 0px;}#div1{	width: 100%;	min-height: 100%; }</style></head><body><div id="div1" style="background-color:aquamarine;"><div id="div2" style="width: 95%; height:1500px; margin: 0px auto; background-color: red;"></div></div></body></html>
Nach dem Login kopieren

body和html设置100%,div1给一个最小高度

三楼正解,受教了,非常感谢!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!