首页  >  文章  >  web前端  >  如何让div充满整个页面的一个问题_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-21 08:54:111562浏览

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>

但这样就不能兼顾效果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>

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn