H5实现三个盒子让中间的盒子随着盒子里面的内容自适应高度

最新推荐文章于 2023-06-14 15:23:18 发布

super01233

最新推荐文章于 2023-06-14 15:23:18 发布

阅读量1.5k

点赞数

文章标签：自适应高度

本文链接：https://blog.csdn.net/super01233/article/details/103357949

版权

首先先写出三个盒子
中间的盒子里放很多p标签
当我们给这三个盒子固定宽高时

 <div class="a1"></div>
    <div class="a2">
        <p>ooo</p>
    
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
    <p>ooo</p>
</div>
    <div class="a3"></div>

<style>
       *{margin: 0; padding: 0;}
       .a1{
           width: 100%;
           height: 100px;
           background: red;
       }
       .a2{
           height: 300px;
           width: 100%;
           background: green;
          
           text-align: center;
       }
       .a3{
           height: 200px;
           width: 100%;
           background: pink;
       }
      
    </style>

这是不固定宽高时，中间盒子的内容会多出来

    .a2{
           height: auto;
           width: 100%;
           background: green;
           min-height: 300px;
           /* 高版本 */
           _height:300px;
           /* 低版本 */
           text-align: center;
       }