多种方法实现div两列等高（收集整理）

深碍√TFBOYSˉ_ 2021-12-22 09:15 344阅读 0赞

HTML骨架

<div id="header">头部</div>
    <div id ="container">
         <div class="mainbox">主内容区域</div>
         <div class="sidebox">侧边栏</div>
    </div>
    <div id="footer">页脚</div>

**1.背景模拟（使用背景图片实现等高）：**

背景模拟主要依靠一张图片，然后将其平铺，使页面在视觉上，产生等高效果，如图

![f9d9c9cd765b783f0eb34500.jpg][]

背景模拟实现很简单，直接利用了background-repeat属性,使背景图片以Y轴方向重复。

图片： ![d66f7e0f8c82df7d6059f392.jpg][]

**css：** background-repeat:repeat-y;

关于背景图片，这个需更具你的实际项目需求，值得注意的是背景图片切图时必须以两列的形式，否这达不到等高效果。

*{
         margin:0; padding:0;}
    #header,#footer{
         width:960px;/*设置头部，页脚宽度*/ height:30px;/*设置头部，页脚高度*/ background-color:#6CF;/*设置头部，页脚背景颜色*/}
    #container{
         width:960px;/*设置元素宽度*/ background:url(images/bg.png) repeat-y 0 0; /*将背景图片以y轴重复*/}
    .mainbox{
         float:left;/*元素左浮动*/ width:650px;/*元素宽度*/}
    .sidebox{
         float:right;/*元素右浮动*/ width:280px;/*元素宽度*/}.mainbox,.sidebox{
         padding:0 5px; color:#FF0000;}/*设置mainbox,sidebox共同属性*/
    #container:after{
         display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:"";}/*清楚浮动*/

**2.负边距实现**

提 到负边距，在学习盒子模型时，相信大家都学过，也了解过。在这我就不阐述了, 负边距实现等高主要利用了padding-bottom 和 margin-bottom两个属性，父元素container层内添加了overflow属性,其中margin为负值，padding为正值。如图

![e1d6cffe395eb4665c600892.jpg][]

*{
         margin:0; padding:0;}
    #header,#footer{
         width:960px; height:30px; background-color:#E8E8E8;}
    #container{
         width:960px; overflow:hidden;/重点！将父级元素多余部分切除掉/ margin:10px 0;}
    .mainbox{
         float:left; width:650px; background-color:#333333;}
    .sidebox{
         float:right; width:280px; background-color:#AAAAAA;}
    .mainbox,.sidebox{
         padding:0 5px; color:#FF0000; margin-bottom:-9999px;/*将容器背景色拉伸*/ padding-bottom:9999px;/*将容器背景色拉伸*/}
    #container:after{
         display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:"";}

**3.使用border实现等高**

使用边框(border)实现等高，其实也就是” 使用负边距实现等高”的一个改版，也是一个投机取巧的方法。

[![15daf82a37222d7ad42af192.jpg][]][15daf82a37222d7ad42af192.jpg 1]

*{
         margin:0; padding:0;}
    #header,#footer{
         width:970px; height:30px; background-color:#9CF;}#container{
         position:relative;/*将子元素的定位到具体的参照对象*/ width:970px; margin:10px 0;}
    .mainbox{
         width:650px; background-color:#FC9; border-right:320px solid #F63;/*设置左边框宽度为320px像素，同等于sidebox的宽度*/}
    .sidebox{
         width:320px; position:absolute; top:0; right:0;/*使元素靠右*/}

**4。使用JavaScript实现等高**

使用JavaScript实现等高很简单，使用getElementById方法获取两个元素的的高度值，判断两个元素的高度，最后负值。

[![ac7a0a2d8d512063349bf792.jpg][]][ac7a0a2d8d512063349bf792.jpg 1]

总结：凡事有利必有害，使用CSS实现等高也是如此，不过，最后还是推荐使用JavaScript方式实现等高，毕竟CSS样式主要作用是修饰页面

**5.JQuery 实现两列等高并自适应高度**

原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。代码：

$(document).ready(function() {
        var _leftheight = $(".left").height();
        var _rightheight = $(".right").height();
        if (_leftheight > _rightheight) {
            $(".right").height(_leftheight);
        } else {
            $(".left").height(_rightheight);
        }
    });

**6. 扩展：CSS 多列 多模块 等高 布局**

原理是事先通过正内边距来使其拥有足够高的布局控件，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。  
习 惯思维上，我们都是多列等高，然后把这几列都浮动。现在我们变换一下思路，直接使用不浮动的一列的时候，情况会怎样，我们发现，当一列不浮动搭配正 内边距加负外边距，父元素溢出隐藏，它的高度跟还是由内在元素来决定，但是通过web developer toolbar我们可以看到它实际上已经占据了足够的高度空间同样的道理，定位也遵循这个规则。我们可以把两侧边框使用绝对定位来固定到两侧，因为绝对定位是不占布局空间的，那么我们需要一个文档流来对父元素进行占位。基本上父元素有多高，就显示绝对定位的元素多少内容，实际上这也就实现了一个等高。  
知道了这个表现原理，那么上文的布局也就不难了，只需要把每列最后一个模块再进行正内边距加负外边距来进行空间占位就可以实现了！至于下边框，实际上另外一个容器从底下进行拼装实现的~！

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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=utf-8" />
            <title>无标题 1</title>
            <style type="text/css">
                * {
          margin: 0; padding: 0;}
                body {
          margin:30px;font:14px/1.6em Verdana,Lucida, Arial, Helvetica, 宋体,sans-serif; }
                .main {
          overflow: hidden; width:800px; margin: 0 auto;}
                .left {
          float: left; width: 250px; overflow: hidden; }
                .center {
          float:left; margin-left:5px; width:295px; }
                .right {
          float: right;width: 245px; overflow: hidden;}
                .bor_top {
           height:1px; background:#FB9D51;overflow:hidden; }
                .equal {
          padding-bottom: 1000px; margin-bottom: -1000px;}
                .box {
          background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px;padding-right:10px;}
                .mt5 {
          margin-top: 5px;}
            </style>
        </head>
        
        <body>
            <div class="main">
                <div class="left equal">
                    <div class="box"><p>你相信这个左右等高的布局是纯的CSS写的吗？</p></div>
                    <div class="box mt5"><p>测试一下</p></div>
                    <div class="box mt5"><p>测试一下</p></div>
                    <div class="equal mt5 box">
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                    </div>
                </div>
                <div class="center equal">
                    <div class="box"><p>不由得你不信，这个的确是纯CSS写的</p></div>
                    <div class="box mt5"><p>测试一下</p></div>
                    <div class="box mt5"><p>测试一下</p></div>
                    <div class="equal mt5 box">
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                       <p>测试一下</p>
                    </div>
                </div>
                <div class="equal right">
                    <div class="box">
                        <p>测试一下</p>
                        <p>测试一下</p>
                    </div>
                    <div class="box mt5">
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                    </div>
                    <div class="box mt5">
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                    </div>
                    <div class="equal mt5 box">
                        <p>测试一下</p>
                        <p>测试一下</p>
                        <p>测试一下</p>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="left bor_top"></div>
                <div class="center bor_top"></div>
                <div class="right bor_top"></div>
            </div>
        </body>
    
    </html>

参考：

*  http://hi.baidu.com/mengqing723/item/726c87a43d6410d95bf19131
 *  [JQuery 实现两列等高并自适应高度][JQuery]
 *  http://hi.baidu.com/setcookie/item/2d990eb512f7f074254b0933

转载于:https://www.cnblogs.com/JoannaQ/p/3424594.html

[f9d9c9cd765b783f0eb34500.jpg]: /images/20211220/91bab3a3e2be445daac04f7ae3edb659.png
[d66f7e0f8c82df7d6059f392.jpg]: /images/20211220/000e68855f274ee1adbbb73c9c8819a9.png
[e1d6cffe395eb4665c600892.jpg]: /images/20211220/e9ba6c3ff1b34be8a201fdad62da5917.png
[15daf82a37222d7ad42af192.jpg]: /images/20211220/333453cc6822472b9307873815f9f8d8.png
[15daf82a37222d7ad42af192.jpg 1]: http://www.csssea.com/?attachment_id=424
[ac7a0a2d8d512063349bf792.jpg]: /images/20211220/c4ab2f1d9ebd49c8b3043c972f28c4ba.png
[ac7a0a2d8d512063349bf792.jpg 1]: http://www.csssea.com/?attachment_id=446
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211220/fec0b4e853ac49e58331dc964421ad85.png
[JQuery]: http://www.cssue.com/javascript-jquery/jquery-high-adaptive.html