当前位置：首页 > news >正文

css等高布局技巧

news 来源：原创 2024/5/9 18:41:39

目标：
实现侧边栏固定宽度，内容区自适应
实现当内容较少时能够满屏显示，内容较多时滚动显示
实现以等高自动补齐效果
code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  * {
    padding: 0;
    margin: 0;
  }
  
  .admin {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .left {
    float: left;
    width: 200px;
    background-color: yellow;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    overflow: hidden;
  }
  
  .content {
    background-color: green;
    margin-left: 200px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    overflow: hidden;
  }
  </style>
</head>

<body>
  <div class="admin">
    <aside class="left">
        <ul>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
            <li>列表区域</li>
        </ul>
    </aside>
    <div class="content">
      <p>内容区域</p>
      <p>内容区域</p>
      <p>内容区域</p>
      <p>内容区域</p>
      <p>内容区域</p>
      <p>内容区域</p>
    </div>
  </div>
</body>

</html>