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

2024-05-14 17:19:46

为什么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

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

html中高度自动调整,HTML 高度自适应
关键点: 多个div 高度自适应页面有多个div 的时候,多个div 的内容可能不一致,导致多个div高度不同解决办法1 js 调整,优点简单,缺点页面js 完全加载好之前,div 高度还是不统 ...
html字体变大自动换行,css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: 所在部门 @ViewBag.decideDetail.departName 岗位 @ViewBag.decideDetail.pos ...
php获取页面的可视内容高度,网页制作技巧:获取页面可视区域的高度_css
文章简介:获取页面可视区域高度,获取页面高度,获取滚动条滚动上去的页面高度. function getWH(){ var wh = {}; "Height Width".repla ...
jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下:方式1://注意:下面的代码是放在和iframe同一个页面中调用 $("#ifr ...
scroll-view如何自适应页面剩余高度
在uni-app使用中,有如下场景,页面有三个组件,top-bar顶部标题栏高度指定,bottom-bar底部功能菜单栏高度指定,scroll-view区域是一个scroll-view滚动区域,浏览聊 ...
html 图片高度页面高度自适应,怎样让网页图片高度自适应宽度
[摘要] 你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显 ...
iOS WKWebView高度自适应以及截获页面点击的url
首先来看下UIWebView的做法: UIWebView *webView = [[UIWebViewalloc]initWithFrame:CGRectMake(0,0,WIDTH,0)]; web ...
html界面js自动适应页面,JS实现DIV高度自适应窗口示例
本文实例讲述了JS实现DIV高度自适应窗口.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio ...
Echarts中的高度自适应
移动端Echarts高度自适应最近做一个h5页面,需要嵌入app进行使用:用到echarts绘制图像,同时页面底部有操作按钮对图像进行控制.产品希望所有内容在一个页面内完整显示,而不需要滑动.. 根 ...

最新文章

热门文章