Html5让器皿填满显示屏高宽比或自融入剩下高宽比

2021-02-22 04:43 jianzhan

在前端开发网页页面合理布局中,常常会碰到要让器皿填满全部显示屏高宽比或剩下显示屏高宽比的要求。1般这时候候都会想自然的应用 height:100% 这样的 CSS 来写。这样写的话,当器皿内內容许多的情况下是沒有难题的,能够做到预期的实际效果,可是假如器皿内內容较为少,不够以撑起充足的高宽比的话,这个CSS 款式具体上是没起功效的。那要如何处理这个难题呢?

让器皿高宽比填满这个显示屏

在器皿內容非常少的状况下,要想让这个器皿填满全部显示屏能够这样:

.container{
    min-height:100vh
}

你没看错,只必须这1个特性便可以办到,vh 是1个新的企业,表明的是显示屏的高宽比,也有1个对应的宽度特性 vw,假如还不知道道的能够去查下材料。这个新的企业将会有的老访问器不适用(说的是谁你们都了解的)。

让器皿高宽比填满剩下显示屏高宽比

上面说的让器皿填满全部显示屏是1个较为简易的状况,具体新项目中这类简易状况是是非非常少的,1般碰到较为多的将会是要让器皿填满显示屏的剩下高宽比,有了上面的那个做基本,这个要求也就简易了,用 vh 融合 flex 合理布局便可以很器皿的完成。立即看编码:

.container{
    min-height:100vh;
    display:flex
}
.header{
    height:100px
}
.content{
    flex:1
}
.footer{
    height:100px
}

应用上面的款式便可以让 content 的高宽比自融入显示屏的剩下高宽比,简易便捷。一样将会见面临老访问器兼容的难题。由于我做的新项目关键是在挪动端应用,因此就无论那老掉牙的家伙了。

到此这篇有关Html5让器皿填满显示屏高宽比或自融入剩下高宽比的合理布局完成的文章内容就详细介绍到这了,更多有关Html5器皿填满显示屏高宽比內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!