如何设置div铺满

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设置div铺满相关的知识,希望对你有一定的参考价值。

两个div,是并排显示的,宽度一个30%,另一个70%。那么如何让这两个div的高度是占据浏览器的页面呢?

可以将这两个div的高度都设置为100%;前提是他的父级已经是100%;如果他的父级就是body,那么body和html都要设置为height:100%; 参考技术A 设置div父元素的CSS
height:100%

div设置全屏(铺满屏幕)

1、如果要以百分比设置元素(div)的尺寸,必要以父元素的尺寸作为参考,如果父元素没有设置尺寸,那么子元素(div)尺寸自然不会生效。
2、所以如果设置div的高度为100%,那么他的参考元素就是是body,那么如何设置body的尺寸呢?
3、在怪异模式下,body可以作为根元素,设置它的高度为100%的时候(不考虑外边距),body的高度取是浏览器的高度。
4、在标准模式下,html元素才是根节点,div的父元素是body,body的父元素是html,然后html设置为100%,取得是浏览器的高度,body高度设置为100%,得到的是html的的高度,所以最好同时设置html,body{height: 100%;width: 100%;}。
5、因为默认body的margin:8px,所以如果div想占据全屏,需要设置*{margin: 0;padding: 0;}

 

转自https://blog.csdn.net/peacetaco/article/details/80351842

以上是关于如何设置div铺满的主要内容,如果未能解决你的问题,请参考以下文章

div设置全屏(铺满屏幕)

css 图片铺满整个div

js设置3个div垂直铺满界面(头+内容+底部)

css div高度设置

IOS 如何让背景图铺满这个屏幕

怎么让echarts折线图铺满整个div