使用vh来制作高度自适应页面和元素垂直居中

最新推荐文章于 2025-02-17 13:56:49 发布

weixin_33730836

最新推荐文章于 2025-02-17 13:56:49 发布

阅读量655

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/hwxn/blog/679389

版权

为什么80%的码农都做不了架构师？>>>

vh单位

vh是CSS3中的一个长度单位，其值为：100vh == 视窗高度。即如果窗口高度为500px，那么 1vh == 5px。具体的值会随着浏览器视窗高度的改变而实时改变，因此可以利用这个单位来制作高度自适应的页面。

兼容旧的浏览器

IE9+的浏览器支持vh单位，其他的浏览器支持程度可以参考caniuse vh?,对于IE8等浏览器可以尝试定义：

html,body{
    height:100%;
}

再在需要自使用高度的元素上使用百分比来代替vh以达到类似的效果。如：

#div1{
    height:50%;//代替height:50vh;#div1为body的子节点
}

最小高度限制

在实际的应用中，我们往往不想让一个页面元素的高度过小，以免其无法容纳某些关键元素，此时我们需要对这个元素加一个最小高度限制。如：

#div1{
    height:50vh;
    min-height:100px;
}

以上代码中，#div1元素的高度为50vh，即视窗高度的50%，但其最小高度为100px。即使实际的视窗高度小于200px，这个元素的高度也不会小于100px。

仅仅设置一个最小高度往往是不够的，有时候需要利用line-height==height来实现元素的垂直居中，或者使用border来画一个与父节点齐高的三角形的时候就会出现问题，因为line-height和border-width均不支持设定最小值的限制。

此时，可以在视窗高度小于某个值时，向body元素添加一个类，如：fixVH，然后根据这个类设置一个固定的line-height或border-width。如：

.fixVH #div1{
  line-height:300px;
}
.fixVH #div1:before{
  border-width:150px;
}

可以查看一个具体的例子。

元素的垂直居中

上文提到使用line-height==height来垂直居中元素，另外还可以使用display:table-cell来垂直居中元素，这个方式不需要指定父元素line-height。

指定父元素display:table;子元素：display:table-cell;vertical-align:middle;如：

#div2{
  width:100%;
  height:20vh;
  min-height:100px;
  display:table;
  background-color:#cecece;
}
#div2>div{
  display:table-cell;
  vertical-align:middle;
}

转载于:https://my.oschina.net/hwxn/blog/679389