CSS设置div高度自适应

通过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>内容1span>p>             div>             <div class="div-col"  style="background-color: #31B0D5;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>             div>             <div class="div-col"  style="background-color: #269ABC;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>             div>             <div  class="div-col" style="background-color: #5BC0DE;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>                 <p><span>内容4span>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>内容1span>p>            div>            <div class="div-col"  style="background-color: #31B0D5;">               <p><span>内容1span>p>               <p><span>内容2span>p>            div>            <div class="div-col"  style="background-color: #269ABC;">               <p><span>内容1span>p>               <p><span>内容2span>p>               <p><span>内容3span>p>            div>            <div  class="div-col" style="background-color: #5BC0DE;">               <p><span>内容1span>p>               <p><span>内容2span>p>               <p><span>内容3span>p>               <p><span>内容4span>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>内容1span>p>             div>             <div class="div-col">                 <p><span>内容1span>p>                 <p><span>内容2span>p>             div>             <div class="div-col">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>             div>             <div  class="div-col">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>                 <p><span>内容4span>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>内容1span>p>             div>             <div class="div-col"  style="background-color: #31B0D5;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>             div>             <div class="div-col"  style="background-color: #269ABC;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>             div>             <div  class="div-col" style="background-color: #5BC0DE;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>                 <p><span>内容4span>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>内容1span>p>             div>             <div class="div-col2"  style="background-color: #31B0D5;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>             div>             <div class="div-col3"  style="background-color: #269ABC;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>             div>             <div  class="div-col4" style="background-color: #5BC0DE;">                 <p><span>内容1span>p>                 <p><span>内容2span>p>                 <p><span>内容3span>p>                 <p><span>内容4span>p>                 <p><span>...span>p>             div>         div>

效果如下：

注意：

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

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

补充：js实现

<div class="div-row">         <div class="div-col" style="background-color: #28A4C9;">             <p><span>内容1span>p>         div>         <div class="div-col"  style="background-color: #31B0D5;">             <p><span>内容1span>p>             <p><span>内容2span>p>         div>         <div class="div-col"  style="background-color: #269ABC;">             <p><span>内容1span>p>             <p><span>内容2span>p>             <p><span>内容3span>p>         div>         <div  class="div-col" style="background-color: #5BC0DE;">             <p><span>内容1span>p>             <p><span>内容2span>p>             <p><span>内容3span>p>             <p><span>内容4span>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>

效果如下：