一个问题,怎么设置一个div盒子撑满整个屏幕?
123a
这里有两个方法:
1.
html,body,#father-body{ height: 100%; background-color:#123456; border: 2px solid black;}.item1{ border: 2px solid yellow; background-color: #654321;}
效果如下:
2.
#father-body{ position:fixed; width: 100%; height:100%; background-color:#123456; border: 2px solid black;}.item1{ border: 2px solid yellow; background-color: #654321;}
效果如下:
在标准文档流里,子代选择器默认继承父选择器的样式,宽度默认100%继承,高度则默认根据元素自身而定;html/body/div默认占满一行,故增加height:100%即可;
position:fixed/absolute使元素脱离标准文档流,#father-body设置width:100%,height:100%,在#father-bod内的item1默认继承#father-body的样式(width:100%)。