CSS设置div高度自适应

最新推荐文章于 2024-08-23 10:23:17 发布
最新推荐文章于 2024-08-23 10:23:17 发布
阅读量2.1w 收藏 16
点赞数 6
文章标签： CSS 自适应
版权声明：本文为博主原创文章，遵循 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>

效果如下：

Macky_Zhang
关注
纯Css实现Div高度根据自适应宽度（百分比）调整
11-20
在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=）。 要实现这种功能（div的高度：宽度=1:1），通过各种加Buff，得知有以下几种处理方式 1，直接指定div的宽高+zoom来实现自适应 div{width:50px;heigth:50px;zoom:1.1;} 这样
使用JS+CSS实现DIV层自适应高度和宽度
01-08
我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。
css中div高度自适应
ystyaoshengting的专栏
06-11 736
高度的自适应（父div高度随子div的高度改变而改变） 1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。        #aa{}{ border:#000000 solid 5px}        #bb{}{border:#00ffff solid 5px;}  
css 将背景图片居中显示，并且显示全，不拉伸的效果实现，图片设置宽度，高度自适应，并且显示全。
最新发布
花花鱼的专栏
08-23 450
二个经常使用的css：图片背景自适应、缩放，图片的自适应、缩放。
CSS实现div高度自适应
jshyzx1999的博客
04-17 1467
1、有时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7，opera，火狐，谷歌没有问题。所以采用以下写法可以解决兼容性： height:auto!important; height:200px; m...
CSS中常见的几种高度自适应布局
热门推荐
进击的葱
12-09 2万+
1.左右结构--高度自适应窗口高度 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;经典左右结构--高度自适应窗口高度&lt;/title&gt; &lt;style&gt; body,html{height:100%;} *{margin
宽高自适应
m0_70877859的博客
07-15 213
自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或者子元素调整，这就是适应。
css div自适应高度height
z69183787的专栏
02-08 8579
DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决。 第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度； 第二种：没有最小高度，DIV完全自适应高度。 以下为大家介绍这两种情况与解决方法 一、一定最小高度，内容加多时自适应高度，而内容少时DIV有一定最小高度   -   TOP 有一DIV盒子,默认高度为200px,当DIV里内容多余并超出
CSS中布局div高度自适应的方法
david286的专栏
04-25 1214
目前收集了一种方法,在实际应用中证实有效果,使用时注意理解下面的分析.html,body{...}{     margin:0px;     height:100%;} #left {...}{     background-color:#CCC;     width:300px;     height:100%;     float:left;}     代码已经到了不能再简单的
典型的三行两列居中高度自适应div+css布局
weixin_34417635的博客
08-20 144
如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。 下面给出一个实际的列子，附详细说明。 首先可以将下列代码复制到html文件中运行一下，在mozilla、opera和ie浏览其中，均可达到居中且自适应高度的要求。 <html> <head> <style type="text/css"> bod...
CSS 实现div宽度根据内容自适应
09-24
最近做了个项目，其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识，需要的朋友参考下
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
09-25
总的来说，通过合理设置 `li`、`ul` 和 `div` 的高度属性，以及使用 `clear:both` 解决浮动问题，我们可以实现 `div` 高度自适应 `li` 的功能。当在 `ul` 中添加更多 `li` 时，这个结构会自动扩展其高度以适应新的...
子元素div高度不确定时父div高度如何自适应
01-19
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
【CSS】多个div自适应高度
@point
03-02 783
写在前面 UI有时候会涉及两个div并排展示，并且高度要保持一致。那么这时候，需要div自适应高度。 效果展示 代码 <div class="box-block"> <div class="left">优势</div> <div class="right">提升方向</div> </div> .box-block { display: table; width:
CSS DIV自动适应高度
anba7411的博客
11-11 163
当div需要设定自适应高度时，可用到的css属性，min-height:200px;代表的是当div的内容超出了200px时，就会自动适应高度，兼容所有浏览器(IE6除外)，如果是IE6则需要设置"_height" 代码： div{ _height:200px; min-height:200px; } 转载于:https://www....
css div高度自适应
dibitui7403的博客
02-24 87
height:auto !important;height:200px; /*假定最低高度是200px*/min-height:200px; 这个在IE6下不起作用的，在IE6下需要把height:200px; /*假定最低高度是200px*/去掉就可以了......(做的时候是这样，不过还不太清楚这个自适应，先记下来吧~！) 转载于:https://www.cnblogs.com/d...
css中设置div居中
08-15
### 回答1： 使用 CSS 居中 div 的方法有很多种，下面列举几种常用的方式： 1. 使用 flex 布局，将 div 设置为 flex 容器，再设置 align-items 和 justify-content 属性为 center。 ``` .container{ display: flex; align-items: center; justify-content: center; } ``` 2. 使用 grid 布局，将 div 设置为 grid 容器，再设置 place-items 属性为 center。 ``` .container{ display: grid; place-items: center; } ``` 3. 使用绝对定位和负外边距，将 div 设置为绝对定位，设置 left、right、top、bottom 属性为 0，再设置 margin 属性为 auto。 ``` .container{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } ``` 4. 使用 table 布局，将 div 设置为 table-cell，再设置 vertical-align 和 text-align 属性为 middle。 ``` .container{ display: table-cell; vertical-align: middle; text-align: center; } ``` 这些是几种常见的方法, 可以根据具体场景选择使用. ### 回答2： 在CSS中，可以通过不同的方式来设置div居中。 一种简单的方法是使用CSS的margin属性来实现： ``` div { width: 200px; // 设置div的宽度 height: 200px; // 设置div的高度 margin: 0 auto; // 设置左右外边距为auto，即自动计算使div水平居中 } ``` 另一种方法是使用CSS的position属性和transform属性来实现： ``` div { width: 200px; // 设置div的宽度 height: 200px; // 设置div的高度 position: absolute; // 设置定位为绝对定位 left: 50%; // 设置左侧位置为屏幕一半的位置 top: 50%; // 设置顶部位置为屏幕一半的位置 transform: translate(-50%, -50%); // 使用transform属性将div向左上角移动自身宽高的一半，实现水平和垂直居中 } ``` 还可以使用flex布局来实现水平和垂直居中： ``` body { display: flex; // 设置容器为flex布局 justify-content: center; // 设置主轴水平居中 align-items: center; // 设置交叉轴垂直居中 } div { width: 200px; // 设置div的宽度 height: 200px; // 设置div的高度 } ``` 这些方法都可以实现div的水平和垂直居中，选择使用哪种方法可以根据实际需求和布局来决定。 ### 回答3： 要使一个div元素在CSS中居中，可以使用以下方法： 1. 使用margin属性：设置div元素的左右外边距为"auto"，并将其宽度设置为小于父容器宽度的值，这样div元素就会水平居中。例如： ```css div { margin-left: auto; margin-right: auto; width: 200px; } ``` 2. 使用flex布局：在父容器上应用flex布局，并使用justify-content和align-items属性将子元素居中。例如： ```css .container { display: flex; justify-content: center; align-items: center; } ``` 在这种情况下，div元素将在父容器内垂直和水平居中。 3. 使用绝对定位和transform属性：将div元素的位置设置为绝对定位，并通过将左、右、上、下属性的值设置为0，并使用transform的translate方法使其水平和垂直居中。例如： ```css div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 请注意，父容器可能需要设置为相对定位或具有非静态定位，以使上述方法起作用。 以上是几种常用的方法，可以根据具体情况选择适合的方式来使div元素居中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值