CSS网格布局中的页眉粘贴位置

Question

我正在学习CSS Grid布局，并且关于定位有问题。我要创建的页面布局由左侧菜单，顶部菜单和主要内容页面组成，如下图所示：

我已经能够实现目标，但是现在我想在主要内容为滚动。我在两个容器上都设置了position：sticky，但它不起作用。

我该如何解决？

这是我的代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="xdg-component-appnav-menu">
      <div class="grid-container">
        <div class="LeftMenu">left menu</div>
        <div class="TopMenu">top menu</div>
        <div class="Main">
          <p style="padding-bottom: 1000px;">Content</p>
        </div>
      </div>
    </div>
  </body>
</html>

<!-- //////////////////////////////////////////////////// -->
<style>
  * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .grid-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 10% 100vh;
    grid-template-areas:
      "LeftMenu TopMenu"
      "LeftMenu Main";
  }
  .LeftMenu {
    background-color: #a4a4a4;
    grid-area: LeftMenu;
    width: 200px;
    height: 100%;
  }
  .TopMenu {
    background-color: #d49494;
    grid-area: TopMenu;
    width: 100%;
    height: 100%;
    display: flex;
  }
  .Main {
    background-color: #8990eb;
    grid-area: Main;
    width: 100%;
    height: 100vh;
  }
</style>

Answer 1

您可以只在主容器上使用overflow: auto。

.grid-container {
  display: grid;
  height: 100vh;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 10% 90%;
  grid-template-areas: 
     "LeftMenu TopMenu"
     " LeftMenu Main  ";
}

.LeftMenu {
  grid-area: LeftMenu;
  background-color: #a4a4a4;
}

.TopMenu {
  grid-area: TopMenu;
  background-color: #d49494;
}

.Main {
  grid-area: Main;
  overflow: auto; /* key adjustment */
  background-color: #8990eb;
}

body {
  margin: 0;
}

<div class="xdg-component-appnav-menu">
  <div class="grid-container">
    <div class="LeftMenu">left menu</div>
    <div class="TopMenu">top menu</div>
    <div class="Main">
      <p style="height: 1000px;">Content</p>
    </div>
  </div>
</div>

CSS网格布局中的页眉粘贴位置

问题描述投票：0回答：1

1个回答

最新问题

CSS网格布局中的页眉粘贴位置

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1