怎样设置元素的大小与浏览器窗口大小相同
如果有一个类名为.box元素想充满整个屏幕，那么怎样设置呢？在这里总结了三种方法来进行设置：方法一：使用%来设置，所有基于百分比的尺寸必须从父元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0px。所以想继承父元素的高度，则需要先设置父容器的高度，即要先将html、body的高度设为height:100%，后将.box的高度设为height:100%html, body, .box {h
·
如果有一个类名为.box元素想充满整个屏幕，那么怎样设置呢？
在这里总结了三种方法来进行设置：
- 方法一：使用%来设置，所有基于百分比的尺寸必须从父元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0px。所以想继承父元素的高度，则需要先设置父容器的高度，即要先将html、body的高度设为height:100%，后将.box的高度设为height:100%
html, body, .box {
height:100%;
}
- 方法二：使用vw,vh来设置 ：
.box {
width: 100vw;
height: 100vh;
}
- 方法三：使用定位position:absolute来实现(此时.box的父元素应为body)
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
转载至：https://www.jianshu.com/p/5c731b782f5e
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)