欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

overflow:auto;父容器高度自适应问题

程序员文章站 2022-03-08 14:06:33
...

当一个父容器里面的子元素都浮动之后,子元素的高度将被忽略,所以父容器的高度不会被子元素撑高(除非另外设定高度),

解决办法是给父容器添加如下规则:

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
  .main{width:80%; background:#000000; padding:20px; overflow:auto;}
  .left{ height:200px; width:20%; background:#666666; float:left;}
  .right{ height:200px; width:80%; background:#0000FF; float:left;}
</style>