display-grid 内容滚动处理

<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">topdiv>
    <div class="l-center">
      <div class="l-center__info">
        xxxxx
      div>
    div>
    <div class="l-bottom">bottomdiv>
  div>
body>
html>

display-grid 内容滚动处理_第1张图片

你可能感兴趣的:(知识点,功能,javascript,前端,开发语言)