DIV高度怎么设置全屏？

Posted 2023-03-24

参考技术A

要想对DIV设置全屏，一般设置其width宽度样式为100%，设置其width宽度样式为100%有两种方案，具体方案如下。

（一）方案一

1.html：

<div class="outer">

<div class="A"> 头部DIV </div>

<div class="B">下部DIV </div>

</div>

2.CSS:

html,

body height: 100%; padding: 0; margin: 0;

.outer height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative;

.A height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%;

.B height: 100%; background: #D9C666;

（二）方案二

Html:

<div class="outer">

<div class="A">头部DIV</div>

<div class="B">下部DIV</div>

</div>

2.CSS:

html,

body height: 100%; padding: 0; margin: 0;

.outer height: 100%; padding: 100px 0 0; box-sizing: border-box ;

.A height: 100px; margin: -100px 0 0; background: #BBE8F2;

.B height: 100%; background: #D9C666;

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