div在body居中_怎么让div随页面缩小而缩小

(26) 2024-06-08 12:01:01

想要令body里一个块元素(div)占全屏,相信很多人(包括我)都会直接把body设置宽高100%,但实际却是,行不通:
div在body居中_怎么让div随页面缩小而缩小 (https://mushiming.com/)  第1张
原因:因为body跟div一样是块元素,直接赋值给块元素height:100%,相当于就是默认值的独占一行。所以这里写body{ width:100%; height:100%;},其实是毫无作用的。《css权威指南》指出,如果没有显示声明包含块的height,百分数高度会重置为auto,所以上面div1height设置为任何值都跟设置没设置一样。包含块与div1高度完全相同。

但是又不希望给body设置固定的大值宽高,怎么办?


第一种方法:给div设置{position: absolute; top: 0px; bottom: 0px;}

div在body居中_怎么让div随页面缩小而缩小 (https://mushiming.com/)  第2张

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div占据全屏</title> <style class="text/css"> body{ 
     padding: 0px; margin: 0px; } .box{ 
     background-color: yellow; width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; } </style> </head> <body> <div class="box"></div> </body> </html> 


第二种方法:加上html,body{ width:100%; height:100%; }

div在body居中_怎么让div随页面缩小而缩小 (https://mushiming.com/)  第3张

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div占据全屏</title> <style class="text/css"> body{ 
     padding: 0px; margin: 0px; } html,body{ 
     width: 100%; height: 100%; } .box{ 
     background-color: yellow; width: 100%; height: 100%; } </style> </head> <body> <div class="box"></div> </body> </html> 


第三种,也是我最喜欢用的:给该元素设置{min-width: 100%; min-height: 100%; position: absolute;}

【优点:①简洁,②缩小浏览器,拉动滚动条也还是满屏背景】

div在body居中_怎么让div随页面缩小而缩小 (https://mushiming.com/)  第4张

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div占据全屏</title> <style type="text/css"> body { 
     padding: 0; margin: 0; } .bg { 
     min-width: 100%; min-height: 100%; position: absolute; background: yellow; } </style> </head> <body> <div class="bg"></div> </body> </html> 
THE END

发表回复