关注前端开发
关注用户体验

css设置最小高度 然后自适应

群里有人问到用css设置某个div最小height,然后再自适应height,这里有个不错的解决办法。

看代码先:

min-height:400px; //(解决ie8.9.ff.chrome)
*+height:100%;  //(解决ie7)
_height:400px; //(解决ie6) ie6超出自动溢出

代码都有注释,只为了大家能看的更清晰更明白,因为有写同学不太了解hack的处理方式。

下面是无注释版,复制就能用的:

min-height:400px;*+height:100%;_height:400px;

这种方式还是不错的,当然还有其它处理方法可以解决这样的小问题,有兴趣的同学可以深入研究下。不过浩子不想这么复杂,因为hack真的只是个小问题,前端开发更注重的应该是效率和交互,努力ing!!!!

感谢端友“renpengfeier”提供的方法,经测试可行:

min-height:400px; height:auto!important; height:400px;
未经允许不得转载:大前端 » css设置最小高度 然后自适应
分享到: 更多 (0)

评论 26

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #17

    偶网站里就是这样做的

    玻璃钢花盆2年前 (2015-07-29)回复
  2. #16

    怎么收藏啊?

    fish6205年前 (2012-08-15)回复
  3. #15

    min-height:400px; height:auto!important; height:400px; 这种方法在opera下会有滚动条,不知道有没有人碰到过

    月不落5年前 (2012-07-18)回复
  4. #14

    楼主做的很专啊,赞一个!!!

    njl_041x5年前 (2012-03-23)回复
  5. #13

    💡

    顶顶6年前 (2011-09-26)回复
  6. #12

    我想这样才是最简单的方法:min-height:400px;_height:400px;因为height的默认属性就是auto,height:auto !important;不是多此一举?

    火柴6年前 (2011-07-21)回复
    • 哈哈,一般使用min-height:400px;height:100%;_height:400px;

      浩子6年前 (2011-07-21)回复
  7. #11

    一直在找这个问题的解决方法 这个也不行 FF Opera等都OK 就是IE8不行奇了怪了 IE8认不到min-width 设置了width宽度又给定死了 我的width需要变动的 小于等于1024就1024 大于1024就和屏幕一样宽 IE8下根本废掉了 – 本来一个min-width:1024px;就完事了 IE8照样木有用哦 – –

    Carl Zhou6年前 (2011-06-11)回复
  8. #10

    *+height:100%;(解决ie7)
    不要前面 的 加号“+” 也行不??

    waitingbar6年前 (2011-06-07)回复
  9. #9

    不错

    jacky6年前 (2011-05-05)回复
  10. #8

    不错啊,学习了 :mrgreen:

    我行我骕6年前 (2011-05-03)回复
  11. #7

    两种方法可分别简写成:
    1、min-height:400px;_height:400px;
    2、height:400px;height:auto!important;
    第一句去掉了单独对IE7写的,第二句去掉了mix-height。
    我测试了,这样写管用,而且更少代码,你那边测试下。

    Jayuh6年前 (2011-04-25)回复
  12. #6

    很赞呀,浏览器太多真不是好事。

    丿玩6年前 (2011-04-24)回复
  13. #5

    不错,收了 :mrgreen:

    龙创网络6年前 (2011-04-16)回复
  14. #4

    这样写可以吗?min-height:400px; height:auto!important; height:400px;

    renpengfeier6年前 (2011-04-15)回复
    • Yes,这种方法也是可以的

      浩子6年前 (2011-04-15)回复
    • 文章中已加上这种方法,感谢 :mrgreen:

      浩子6年前 (2011-04-15)回复
  15. #3

    不错,转载走了 :mrgreen:

    建站学6年前 (2011-04-15)回复
  16. #2

    学习了,但不喜欢用HACK,除非迫不得已;害人的浏览器大战啊!

    TXT小说下载6年前 (2011-04-14)回复
    • 兄弟,迫不得已啊!

      浩子6年前 (2011-04-14)回复
  17. #1

    :mrgreen: :mrgreen: 顶一个~

    yes i am6年前 (2011-04-14)回复
    • 欢迎常顶,谢谢哦!!

      浩子6年前 (2011-04-14)回复

themebetter 国内更好的WordPress主题服务商

立即前往