css怎么设置自适应布局

原创用友财务软件 2022-09-02 12:00:10  阅读 443 次 评论 0 条
摘要:

前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式。单个自适应当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0;}.

本文主要介绍【css 左右布局高度自适应,CSS布局-高度自适应】和【css怎么设置自适应布局】,有兴趣的朋友可以看下由【weixin_39979215】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的相关问题。

css怎么设置自适应布局

前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式。

单个自适应

当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0;}

.title{height:100px;background-color:red;}

.content{position:absolute;top:100px;bottom:0px;left:0px;right:0px;background-color:olive;}

c65e1d60cc5382e443e15f187e645055.png

我们调整浏览器窗口的大小,第二个div可以达到自适应的效果。当然,这种方式只可以兼容IE7+以上的浏览器。

多个自适应

我们可以采取高度百分比的方式来实现。注:设置元素height百分比式,必须设置其所有父级的height。*{padding:0;margin:0;}

body,html{height:100%;} /* 这个设置是必须的 */

.first{height:20%;background-color:red;}

.last{height:80%;background-color:olive;}

更改窗口大小,上下两个div的高度遵循20:80的关系,也就是1:4的关系,调整height比例,就可以更改两者的相对高度。

当然,可以通过这两种方式的组合,来达到其他自适应的目的。

总结

以上是编程之家为你收集整理的CSS布局-高度自适应全部内容,希望文章能够帮你解决CSS布局-高度自适应所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

本文《css 左右布局高度自适应,CSS布局-高度自适应》版权归weixin_39979215所有,引用css怎么设置自适应布局需遵循CC 4.0 BY-SA版权协议。

本文地址:https://www.ufidawhy.com/gjp/120117.html
版权声明:本文来源于网络,如有侵权请E-mail联系 ufidawhy 站长 ufidawhy@vip.qq.com!

评论已关闭!