子级浮动撑开父级效果

最新推荐文章于 2024-06-22 16:09:41 发布

原创最新推荐文章于 2024-06-22 16:09:41 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #浮动 #撑开父级高度

html+css 专栏收录该内容

2 篇文章

订阅专栏

普通官网实现浮动子级撑开父级高度，同级另一浮动块高度保持一致效果；

两个子级为浮动div块，其中一个内容较多，撑开父级高度，另一个子级内容较少，高度沿用同级内容块高度；具体css及页面实现效果；
具体知识点在于父级清除浮动使用overflow:hidden/auto;
三者使用同一高度，设置padding-bottom，并用margin-botton抵消

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body,html {
      height: 100%;
      width: 100%;
      background: #ccc;
      padding: 0;
      margin: 0;
    }
    ul, li, div {
      padding: 0;
      margin: 0;
    }
    .parent {
      width: 1080px;
      height: auto;
      margin: 0 auto -100000px;
      overflow: auto;
      padding-bottom: 100000px;
    }
    .div1 {
      width: 220px;
      background: pink;
      height: 100%;
      float: left;
      padding-bottom: 100000px;
      margin-bottom: -100000px;
    }
    .div2 {
      width: 860px;
      background: #fff;
      height: 3000px;
      float: left;
      padding-bottom: 100000px;
      margin-bottom: -100000px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="div1">
      <ul>
        <li>11111</li>
        <li>222222</li>
      </ul>
    </div>
    <div class="div2">
      内容，说明
    </div>
  </div>
  
</body>
</html>