Html5中如何实现让容器充满屏幕高度或自适应剩余高度的布局-创新互联
小编给大家分享一下Html5中如何实现让容器充满屏幕高度或自适应剩余高度的布局,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了黔西南州免费建站欢迎大家使用!让容器高度充满这个屏幕
在容器内容很少的情况下,要想让这个容器充满整个屏幕可以这样:
.container{ min-height:100vh }
你没看错,只需要这一个属性就可以办到,vh 是一个新的单位,表示的是屏幕的高度,还有一个对应的宽度属性 vw,如果还不知道的可以去查下资料。这个新的单位可能有的老浏览器不支持(说的是谁你们都知道的)。
让容器高度充满剩余屏幕高度
上面说的让容器充满整个屏幕是一个比较简单的情况,实际项目中这种简单情况是非常少的,一般碰到比较多的可能是要让容器充满屏幕的剩余高度,有了上面的那个做基础,这个需求也就简单了,用 vh 结合 flex 布局就可以很容器的实现。直接看代码:
.container{ min-height:100vh; display:flex } .header{ height:100px } .content{ flex:1 } .footer{ height:100px }
使用上面的样式就可以让 content 的高度自适应屏幕的剩余高度,简单方便。同样可能会面临老浏览器适配的问题。因为我做的项目主要是在移动端使用,所以就不管那老掉牙的家伙了。
以上是“Html5中如何实现让容器充满屏幕高度或自适应剩余高度的布局”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页标题:Html5中如何实现让容器充满屏幕高度或自适应剩余高度的布局-创新互联
转载注明:http://myzitong.com/article/diopio.html