CSS设置div高度自适应

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Macky_Zhang/article/details/85060147

通过CSS实现Div高度自适应:

问:

在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高 或 怎样实现同行div按照内容最多的那个设置高度。

如图:

 

 

实现1:添加表格特性

方式:

父级元素添加属性  display: table;

子一级元素添加属性 display: table-cell;

        <div class="div-row">

        <style type="text/css">

            .div-row {

                width: 400px;

                border: 1px solid #23527C;

                display: table;

            }

            .div-col {

                display: table-cell;

            }

        </style>

 

            <div class="div-col" style="background-color: #28A4C9;">

                <p><span>内容1</span></p>

            </div>

            <div class="div-col"  style="background-color: #31B0D5;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

            </div>

            <div class="div-col"  style="background-color: #269ABC;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

            </div>

            <div  class="div-col" style="background-color: #5BC0DE;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

                <p><span>内容4</span></p>

                <p><span>...</span></p>

            </div>

        </div>

效果如下:

注意:

浏览器兼容问题:IE6/IE7可能存在不兼容的情况

display: table时子元素会自动左浮动,不需要再进行浮动操作

   display: table时padding会失效

display: table-cell时margin会失效,会先均分父级框,然后根据占比

 

实现2:补丁法

      方式:父级元素溢出隐藏:overflow:hidden;

      子一级元素“正内补丁”“负外补丁”结合: padding-bottom:9999px;margin-bottom:-9999px; 

       <div class="div-row">

       <style type="text/css">

           .div-row {

              width: 400px;

              border: 1px solid #23527C;

              overflow: hidden;

           }

           .div-col {

width: 25%;

              float: left;

              padding-bottom: 9999px;

              margin-bottom: -9999px;

           }

       </style>

 

           <div class="div-col" style="background-color: #28A4C9;">

              <p><span>内容1</span></p>

           </div>

           <div class="div-col"  style="background-color: #31B0D5;">

              <p><span>内容1</span></p>

              <p><span>内容2</span></p>

           </div>

           <div class="div-col"  style="background-color: #269ABC;">

              <p><span>内容1</span></p>

              <p><span>内容2</span></p>

              <p><span>内容3</span></p>

           </div>

           <div  class="div-col" style="background-color: #5BC0DE;">

              <p><span>内容1</span></p>

              <p><span>内容2</span></p>

              <p><span>内容3</span></p>

              <p><span>内容4</span></p>

              <p><span>...</span></p>

           </div>

       </div>

效果如下:

注意:

  1. 只是视觉上的“障眼法”
  2. 其他属性需要(浮动,宽度)需要自己再设置

 

实现3:填充背景

方式:通过在父级元素使用一张背景图片实现

        <div class="div-row">

        <style type="text/css">

            .div-row {

                width: 400px;

                background-image: url(../img/similarHeight.jpg);

                background-repeat: repeat-y;

                border: 1px solid #23527C;

            }

            .div-col {

                width:25%;

                float: left;

            }

            .clear {

                clear: both;

            }

        </style>

 

            <div class="div-col">

                <p><span>内容1</span></p>

            </div>

            <div class="div-col">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

            </div>

            <div class="div-col">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

            </div>

            <div  class="div-col">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

                <p><span>内容4</span></p>

                <p><span>...</span></p>

            </div>

            <div class="clear"></div>

        </div>

效果如下:

注意:

只是多加载了一张背景图,据说是目前比较流行的方式

背景图片需要视情况设计

标签最后用于清除浮动的元素等同于父元素加overflow: hidden; 让父元素高度自适应

实现4:flex布局

实现:

         父级元素设置:display: flex;

        <div class="div-row">

            <style type="text/css">

              .div-row {

                width: 400px;

                border: 1px solid #23527C;

                display: flex;

              }

              .div-col {

                width: 25%;

              }

            </style>

 

            <div class="div-col" style="background-color: #28A4C9;">

                <p><span>内容1</span></p>

            </div>

            <div class="div-col"  style="background-color: #31B0D5;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

            </div>

            <div class="div-col"  style="background-color: #269ABC;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

            </div>

            <div  class="div-col" style="background-color: #5BC0DE;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

                <p><span>内容4</span></p>

                <p><span>...</span></p>

            </div>

        </div>

效果如下:

注意:

版本兼容,IE10+

 

 

补充:指定子元素

实现:根据相对和绝对定位实现

         父级元素设置:position: relative;

         子一级元素设置:position: absolute;

 

        <div class="div-row">

        <style type="text/css">

            .div-row {

                width: 400px;

                position:relative ;

                border: 1px solid #23527C;

                overflow: hidden;

            }

            .div-col1 {

                width: 25%;

                float: left;

            }

            .div-col2 {

                width: 25%;

                left: 25%;

                top: 0;

                float: left;

                position: absolute;

            }

            .div-col3 {

                width: 25%;

                left: 50%;

                top: 0;

                float: left;

                position: absolute;

            }

            .div-col4 {

                width: 25%;

                left: 75%;

                top: 0;

                float: left;

                position: absolute;

            }

        </style>

 

            <div class="div-col1" style="background-color: #28A4C9;">

                <p><span>内容1</span></p>

            </div>

            <div class="div-col2"  style="background-color: #31B0D5;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

            </div>

            <div class="div-col3"  style="background-color: #269ABC;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

            </div>

            <div  class="div-col4" style="background-color: #5BC0DE;">

                <p><span>内容1</span></p>

                <p><span>内容2</span></p>

                <p><span>内容3</span></p>

                <p><span>内容4</span></p>

                <p><span>...</span></p>

            </div>

        </div>

效果如下:

注意:

需要指定某个子元素,用于指定的子元素不做定位操作,根据他的高度而实现同一高度。

方法实用性差,也不是实现 根据内容最高的子元素自适应高度。

补充:js实现

    <div class="div-row">

        <div class="div-col" style="background-color: #28A4C9;">

            <p><span>内容1</span></p>

        </div>

        <div class="div-col"  style="background-color: #31B0D5;">

            <p><span>内容1</span></p>

            <p><span>内容2</span></p>

        </div>

        <div class="div-col"  style="background-color: #269ABC;">

            <p><span>内容1</span></p>

            <p><span>内容2</span></p>

            <p><span>内容3</span></p>

        </div>

        <div  class="div-col" style="background-color: #5BC0DE;">

            <p><span>内容1</span></p>

            <p><span>内容2</span></p>

            <p><span>内容3</span></p>

            <p><span>内容4</span></p>

            <p><span>...</span></p>

        </div>

    </div>

    <script type="text/javascript" src="jquery.js" ></script>

    <script type="text/javascript">

        $(function(){

            var baseHeight = 0;

            $(".div-col").each(function(){

                if(baseHeight < $(this).height()){

                    baseHeight = $(this).height()

                }

            })

            $(".div-row").css({"width":"400px","border":"1px solid #111","overflow":"hidden"});

            $(".div-col").css({"width":"25%","height":baseHeight,"float":"left"});

 

        })

    </script>

效果如下:

展开阅读全文

没有更多推荐了,返回首页