html - 使用 css 网格在网格内带有网格的滚动条

Question

我有一个 html 页面，我不想在主体范围内滚动，但是，当使用嵌套的 css 网格时，当嵌套网格内的内容溢出时，我无法控制主体的滚动条，即使它有溢出时滚动的属性。我在下面提供的代码片段有一个包含网格的容器，它包含一个称为工作区的网格区域，该区域有一个也是 css 网格的组件。该组件具有强制整个主体滚动的内容，而我只希望内容滚动。我尝试将高度设置为 100% 和 100vh，但没有这样的运气。

body, html {
  margin: 0px;
}


.container {
  background-color: #282828;
    color: whitesmoke;
    display: grid;

    grid-template-columns: 1fr min-content;
    grid-template-rows: 42px 1fr;
    grid-template-areas: 
        'tabs sidebar'
        'workspace sidebar';
    height: 100vh;
}

.tabs {
    grid-area: tabs;
    background-color: violet; 
}

.sidebar {
    grid-area: sidebar;
    background-color: tomato;
    min-width: 50px;
}

.workspace {
    grid-area: workspace;
    background-color: blue;
}

.component {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas: 
        'header'
      'content';
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
  overflow-y: scroll;
}

<div class="container">
  <div class="tabs">
  </div>
  <div class="sidebar">
  </div>
  <div class="workspace">
     <div class="component">
       <div class="header">
         <h1>My header</h1>
       </div>
       <div class="content">
          <h1>Temp</h1>
        <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>

       </div>
       
       
    </div>
    
  </div>  
</div>

Answer 1

要拥有滚动条，容器应该有一个高度，如果内容超过，滚动条就会被激活，所以每当你想要一个滚动条时，你必须记住容器的边框应该如何定义.

话虽这么说，如果你不想有固定的高度，那么主 div 应该是全屏，然后嵌套容器可以有滚动，否则它会继续增长。

the full screen because you don't want to provide any fixed height otherwise , if you have a fixed height then it will be more simple

body, html {
  margin: 0px;
}


.container {
  background-color: #282828;
    color: whitesmoke;
    display: grid;

    grid-template-columns: 1fr min-content;
    grid-template-rows: 42px 1fr;
    grid-template-areas: 
        'tabs sidebar'
        'workspace sidebar';
    height: 100vh;
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.tabs {
    grid-area: tabs;
    background-color: violet; 
}

.sidebar {
    grid-area: sidebar;
    background-color: tomato;
    min-width: 50px;
}

.workspace {
    grid-area: workspace;
    background-color: blue;
    position: relative;
     overflow-y: hidden;
}

.component {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas: 
        'header'
      'content';
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
  overflow: auto;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 80px;
}

<div class="container">
  <div class="tabs">
  </div>
  <div class="sidebar">
  </div>
  <div class="workspace">
     <div class="component">
       <div class="header">
         <h1>My header</h1>
       </div>
       <div class="content">
          <h1>Temp</h1>
        <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>
    <h1>Temp</h1>

       </div>
       
       
    </div>
    
  </div>  
</div>