• 注册
  • 关于作者
    企业认证:趣记站长
    关注 6 粉丝 4 喜欢 9 内容 992
    江西省·赣州市
    聊天 送礼
    • 查看作者
    • CSS布局自适应高度解决方法

      原作者:Alex Robinson
      原文标题:Equal Height Columns

      这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

      先看代码:

      #wrap{
       overflow: hidden;
       }

      #sideleft, #sideright{
       padding-bottom: 32767px;
       margin-bottom: -32767px;
       }

      实现原理:

      块元素必须包含在一个容器里。

      应用overflow: hidden 到容器里的元素。

      应用 padding-bottom(足够大的值)到列的块元素 。

      应用margin-bottom(足够大的值)到列的块元素。

      IE Bug--浮动对象外补丁的双倍距离

      HTML&CSS

      padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。

      兼容各浏览器

      IE Mac 5

      得到高度正确,所以要过滤掉上面的代码。

      /**/
      #sideleft, #sideright{
       padding-bottom: 32767px;
       margin-bottom: -32767px;
       }
      /**/ 

      Opera

      1. Opera7.0-7.2不能正确清除溢出部分,所以要加:

      /* easy clearing */
      #wrap:after
       {
       content: '[DO NOT LEAVE IT IS NOT REAL]';
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
       }
      #wrap
       {
       display: inline-block;
       }
      /**/
      #wrap
       {
       display: block;
       }
      /* end easy clearing */
      /**/

      2. Opera8处理overflow: hidden有个BUG,还得加上以下代码:

      /**/
      #sideleft, #sideright
       {
       padding-bottom: 32767px !important;
       margin-bottom: -32767px !important;
       }
      @media all and (min-width: 0px) {
      #sideleft, #sideright
       {
       padding-bottom: 0 !important;
       margin-bottom: 0 !important;
       }
      #sideleft:before, #sideright:before
       {
       content: '[DO NOT LEAVE IT IS NOT REAL]';
       display: block;
       background: inherit;
       padding-top: 32767px !important;
       margin-bottom: -32767px !important;
       height: 0;
       }
      }
      /**/

      3.Opera9的B2在修正8的bug.

      测试环境:IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

      原文:http://www.positioniseverything.net/articles/onetruelayout/equalheight
      原文:http://www.blueidea.com/tech/web/2006/3210.asp

      IE Bug--浮动对象外补丁的双倍距离

      HTML&CSS

    • 0
    • 0
    • 0
    • 82
    • 单栏布局 侧栏位置: