欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

高度自适应问题

程序员文章站 2022-07-14 21:49:41
...

1.线上产品,给你地址加IP,要修改host文件,把对应的IP和域名添加上
2.关于浮动问题
3.关于切图问题
4.第一次找bug问题,你在本地看着好好地,为什么走到线上不行了呢,样式全乱了,因为后台把所有的css样式全部引入了进去,所以才会这样子
5.关于高度自适应问题,就是页面不是静态的,信息是动态从数据库获取的,所以高度不能写死,你要自适应
6.还有浮动问题,一定要理解好

解决高度自适应问题

1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性:

height:auto!important; 
height:200px; 
min-height:200px; 

2.很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下,而子容器又是浮动的。例如

  • 内容1
  • 内容1

其中class为fuqin的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。

原因就在于作为子容器的li是浮动的即 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。

解决方法如下:
在浮动的容器后面,父容器结束之前加入一个div

<div class="fuqin"><ul><li>内容1</li><li>内容1</li&gt;</ul><div class="clearfloat"></div></div> 
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}