CSS等高布局

最新推荐文章于 2024-07-16 16:07:08 发布

爱放屁的王屁屁

最新推荐文章于 2024-07-16 16:07:08 发布

阅读量755

点赞数

分类专栏： CSS 布局文章标签：布局 css

本文链接：https://blog.csdn.net/WG2030/article/details/46983751

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

布局

2 篇文章 0 订阅

订阅专栏

本文介绍了CSS等高布局的实现原理，通过padding补白、负margin和overflow隐藏来创造视觉上的等高效果。详细阐述了设置正内补丁、负外补丁以及隐藏溢出部分的步骤，使得不同列的背景颜色达到视觉上的等高。

摘要由CSDN通过智能技术生成

CSS等高布局原理：通过padding补白（即：隐藏容器溢出，正内补丁，负外补丁）实现。

事实上这种方式实现的等高布局只是个障眼法，即通过背景颜色的填充，产生视觉上等高的假象而已。

实现原理解析：

HTML代码：

<header>头部</header>
<div class="content">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>
<footer>脚部</footer>

1. 为原始界面设置样式：
CSS代码示例：

    header{
        height: 80px;
        background: #00A3E8;
    }

    footer{
        height: 80px;
        background: #C3C3C3;
    }

    .left{
         float:left;
         width: 30%;
         background: #23B14D;
     }

    .right{
        float: right;
        width: 70%;
        height: 500px;
        background: #FFC90D;
    }

原始界面如下：
步骤1-原始界面

2. 使用padding对content中左侧的内间距进行补白（padding为正值）：
CSS代码示例：

.left{
    float:left;
    width: 30%;
    background: #23B14D;
    padding-bottom: 2000px;//设置一个较大的值
}

左侧正内补丁后的界面如下：
步骤2-正内补丁

3. 使用margin对content中左侧的外间距进行调整（margin为负值）：
CSS代码示例：

.left{
    float:left;
    width: 30%;
    background: #23B14D;
    /*正内负外*/
    padding-bottom: 2000px;//设置一个较大的值
    margin-bottom: -2000px;//与padding数值相同，但为负值
}

左侧负外补丁后的界面如下：
步骤3-负外补丁

4. 对right部分进行步骤2、3中相同的设置：
content中存在多个列时，对所有列都设置正内补丁和负外补丁，content模块的最终高度会自动以其中的最高列为准。

5. 使用overflow将content溢出的部分隐藏：
CSS代码示例：

.content{
   overflow: hidden;
   /**该代码有两重作用：
     *① 可解决 left和right设置为float后，造成其父级元素content的塌陷问题；
     *② 隐藏content中的left和right溢出的部分。
   */
 }

隐藏溢出后的界面如下：
步骤4-隐藏溢出

总结：由于模块的背景与其内容的大小无关，可将padding补白的部分全部填充，故可以通过上述方式结合背景色这个障眼法实现等高布局。

附实验的全部代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css等高布局</title>
    <style>
        header{
            height: 80px;
            background: #00A3E8;
        }

        footer{
            height: 80px;
            background: #C3C3C3;
        }

        .left{
             float:left;
             width: 30%;
             background: #23B14D;
         }

        .right{
            float: right;
            width: 70%;
            height: 500px;
            background: #FFC90D;
        }  

        .left,.right{    
            /*正内负外，取相对大的值*/
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }

        .content{    
            /*隐藏容器溢出+解决父元素塌陷问题*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div class="content">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
    <footer>脚部</footer>
</body>
</html>