分类目录归档:CSS

两列布局高度自适应

在web设计时我们经常会有这样的需求: 顶部和底部是固定的,内容要分左右两列,而左右的内容高度是不固定的。我们还想要左右有不同的背景(或者边框),这时如果左右的高度能保持一样该多好呀(对应了优雅页面设计的“对齐”的哲学原理)。今天就来研究下对齐的好玩的方法:

  1. 当前最常用也最简单的莫过于实用 js 来控制了,页面加载完毕后计算和重设两边的高度为最大的高度,当页面resize的时候再次处罚计算函数。

     

     

    $(document).ready(function () {
        var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
        $('.elements').height(highestCol);      
    });
  2. 也比较简单的方法: table布局 。 因为这样就不需要js代码来控制(布局的事情还需要js来参与的话,有木有太业余的感觉?),而且不需要以下第三种方法的添加额外div。我这次使用的方法也是这一种的。

     

     

    .parent_div{display: table-cell;}
    .child_div{display:table-cell;height:100%;}
  3. 实用float来进行相关hack。 参考: http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm. 基本原理就是使用div 作为父类来对分栏的内容带来影响。 这种方法在两列、三列时使用还是比较方便的,但是如果随着列数增多,额外需要添加的div太多了,“好大一棵树的感觉”。以下代码是使用这种方法构造的三列布局(例子也来自 MATTHEW JAMES TAYLOR 的文章 Equal Height Columns with Cross-Browser CSS):
    如果使用默认的流式布局,代码如下:

     

    <div id="container1">
        <div id="col1">Column 1</div>
        <div id="col2">Column 2</div>
        <div id="col3">Column 3</div>
    </div>
    #container1 {
        float:left;
        width:100%;
    }
    #col1 {
        float:left;
        width:30%;
        background:red;
    }
    #col2 {
        float:left;
        width:40%;
        background:yellow;
    }
    #col3 {
        float:left;
        width:30%;
        background:green;
    }

    将会呈现如下效果:
    1equal-height-columns-container-div
    如果想要实现脱离子元素左右排列,则需要子元素使用float来脱离流式布局。如果再使父元素也浮动起来,则子元素的高度会把父元素的高度撑起来(要不然因为子元素脱离了文档流,去了另一个世界,父元素里东西都不存在了,父元素的高度就为0 了 。但是如果父子同时脱离了标准文档流,虽然都到了另一个世界,但dom结构在那里呢,还是父子关系,父亲下面又有儿子了,有内容了当然就有高度了,而且高度还是儿子的高度呢)。
    html: 

    <div id="container3">
        <div id="container2">
            <div id="container1">
                <div id="col1">Column 1</div>
                <div id="col2">Column 2</div>
                <div id="col3">Column 3</div>
            </div>
        </div>
    </div>

    css:
     

    #container3 {
        float:left;
        width:100%;
        background:green;
    }
    #container2 {
        float:left;
        width:100%;
        background:yellow;
    }
    #container1 {
        float:left;
        width:100%;
        background:red;
    }
    #col1 {
        float:left;
        width:30%;
    }
    #col2 {
        float:left;
        width:40%;
    }
    #col3 {
        float:left;
        width:30%;
    }

    这时显示结果如下:
    2equal-height-columns-3-containers
    现在高度已经正常了,下面只需要我们借助外层了父亲来下换脸,更改背景属性就行了:
    3equal-height-columns-container-positions
    将三列元素重新添加到页面上:
    4equal-height-columns-content-position
    contain1添加overflow兼容:
    5equal-height-columns-complete
    同时我们再给最外层的父亲(不做移位操作的dom,width为100%)加上overflow=hidden,从而让多出的内容不要展示出来
    css如下:

    #container3 {
        float:left;
        width:100%;
        background:green;
        overflow:hidden;
        position:relative;
    }
    #container2 {
        float:left;
        width:100%;
        background:yellow;
        position:relative;
        right:30%;
    }
    #container1 {
        float:left;
        width:100%;
        background:red;
        position:relative;
        right:40%;
    }
    #col1 {
        float:left;
        width:30%;
        position:relative;
        left:70%;
    }
    #col2 {
        float:left;
        width:40%;
        position:relative;
        left:70%;
    }
    #col3 {
        float:left;
        width:30%;
        position:relative;
        left:70%;
    }

    如果还需要在元素上加点内边距,也是可以的。依照以下计算方法:(每个元素加上2% 的边距):
    6equal-height-columns-3-column-offsets
    这种方法主要是为了兼容ie的,因为ie的双边距问题,如果我们的box是200像素,padding为20像素, 正常情况下这个元素宽度应该是240像素,但是IE下就是200像素。IE就是不认为padding是box的一部分。

本文即将结束时发现已有老外在几年前写的一篇文章,大意相同,而且分析的更有深度。 有空我会把这篇文章翻译出来,以释相见恨晚之情:(原文地址: https://css-tricks.com/fluid-width-equal-height-columns/