做网站用什么网最好,西安做网站公司必达,网站后台程序,网站建设结构设计为什么80%的码农都做不了架构师#xff1f; vh单位 vh是CSS3中的一个长度单位#xff0c;其值为#xff1a;100vh 视窗高度。即如果窗口高度为500px#xff0c;那么 1vh 5px。具体的值会随着浏览器视窗高度的改变而实时改变#xff0c;因此可以利用这个单… 为什么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-heightheight来实现元素的垂直居中或者使用border来画一个与父节点齐高的三角形的时候就会出现问题因为line-height和border-width均不支持设定最小值的限制。 此时可以在视窗高度小于某个值时向body元素添加一个类如fixVH然后根据这个类设置一个固定的line-height或border-width。如 .fixVH #div1{line-height:300px;
}
.fixVH #div1:before{border-width:150px;
}可以查看一个具体的例子。 元素的垂直居中 上文提到使用line-heightheight来垂直居中元素另外还可以使用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;
}
#div2div{display:table-cell;vertical-align:middle;
}转载于:https://my.oschina.net/hwxn/blog/679389
