Rumah > Artikel > hujung hadapan web > 如何让div充满整个页面的一个问题_html/css_WEB-ITnose
如何让div充满整个页面的一个问题_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 08:54:111584semak imbas
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给一个最小高度
三楼正解，受教了，非常感谢！
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Web蓝天白云的极致体验_html/css_WEB-ITnoseArtikel seterusnya：CSS选择器优先级说明_html/css_WEB-ITnose