CSS高度自适应铺满全屏





HTML:

CSS:

这里需要注意的是设置bodymin-height: 100vh;以及margin: 0;

vw和vh

vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下:

  • vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
  • vh:视窗高度的百分比
  • vmin:取当前Vw和Vh中较小的那一个值
  • vmax:取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。

参考链接


发布者

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注