display-grid 内容滚动处理

最新推荐文章于 2026-04-19 09:26:52 发布

原创最新推荐文章于 2026-04-19 09:26:52 发布 · 809 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

收录于

知识点同时被 2 个专栏收录

29 篇文章

订阅专栏

功能

13 篇文章

订阅专栏

本文展示了如何使用HTML和CSS创建一个具有顶部、中间内容区和底部的分段布局，适合内容社区的页面设计。

该文章已生成可运行项目，

<html>
  <style>
    .l-content {
      display: grid;
      grid-template-rows: 20px auto 100px;
      height: 100%;
    }

    .l-top {
      background-color: aqua;
    }

    .l-center {
      overflow: auto;
      background-color: red;
    }

    .l-center__info {
      height: 200vh;
    }

    .l-bottom {
      background-color: black;
    }
  </style>
  <body>
  <div class="l-content">
    <div class="l-top">top</div>
    <div class="l-center">
      <div class="l-center__info">
        xxxxx
      </div>
    </div>
    <div class="l-bottom">bottom</div>
  </div>
</body>
</html>