zoukankan      html  css  js  c++  java
  • 关于div高度自适应问题,兼容IE和火狐

    在此,并不是指div的高度可以简单的自动调整。而是指在该div中没有置放内容的情况下,至少要保持这个div的高度为多少,而有内容的时候,又会随着内容的多少而自动调整。同时,对IE或是FF等浏览都可以兼容的。举个实例:

      div要求至少高度需要200px。也就是说,即使div中没有任何内容,高度也需要保持在200px;当DIV中的内容高度超过200px时,则该div会自动调节高度,而且又兼容各浏览嚣。怎么解决呢?

      对于初学者来说,可能想到的就是min-height:200px这个和height:auto这样的写法了。虽然这样写法用IE浏览器浏览是正常的,可是如果用火狐浏览嚣一测试一下,就知道不兼容而达不到预想的效果了。为什么会这样呢?原来是因为火狐浏览器此时不以height:auto这个执行为标准的。那要加上什么属性才可以让两个浏览器都正常去解读css呢?办法就是加上height:auto!important这个重要属性。所以答案是:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="Author" content="Div+CSS专业网页布局,www.divss.com" />
    <meta name="keywords" content="div+css,网页布局,jpg切割布局,网页切割css,wap页面布局,网站重构" />
    <title>div+css自动调整高度</title>
    </head>
    <body>
    <div style="auto;height:auto!important;min-height:200px;height:200px;background-color:#f4f4f4;font-size:12px">
    此层最少高度为200px,也就是说,即使div中没有任何内容,高度也会保持在200px,当DIV中的内容超过500px时,则自动增加DIV的高度。这个对IE或是FF等浏览器都会兼容的。(背景色是为了方便查看效果用的)<br />
    </div>
    </body>
    </html>
  • 相关阅读:
    互联网架构的三马车
    云时代架构读后感
    支付宝架构师眼里的高并发架构
    支付宝架构
    架构层级的“开闭原则”2
    架构层级的“开闭原则”1
    互联网架构微服务
    关于第三方支付
    分布式架构中数据一致性常见的几个问题
    Java多线程学习笔记二
  • 原文地址:https://www.cnblogs.com/zzh/p/1969066.html
Copyright © 2011-2022 走看看