纯CSS实现侧边栏/分栏高度自动相等

核心CSS代码为:

margin-bottom:-3000px; padding-bottom:3000px;

注意:3000px是一个可变值,作用是保证两个元素足够长。
然后父元素添加:

overflow: hidden;

即可实现高度自动相等的效果

举例:

假设实现三栏分局,左右元素自适应中间元素高度:

       #box {
            overflow: hidden;
        }

        #left {
            float: left;
            width: 200px;
            background-color: blueviolet;
            /* 下两行代码为让两侧高度与中间部分保持自适应 */
            margin-bottom: -3000px;
            padding-bottom: 3000px;

        }

        #mid {
            height: 600px;
            margin-left: 210px;
            margin-right: 310px;
            background-color: red;
        }

        #right {
            float: right;
            width: 300px;
            background-color: yellowgreen;
            /* 下两行代码为让两侧高度与中间部分保持自适应 */
            margin-bottom: -3000px;
            padding-bottom: 3000px;

        }

效果如图:
纯CSS实现侧边栏/分栏高度自动相等_第1张图片

你可能感兴趣的:(HTML)