Question

我试图了解我最深的两个div是如何在y方向上滚动的。

它是一个嵌套在另外2列布局中的2列布局，基本上看起来像3列。我还制作了Codepen来展示我的确切架构：

我当前的解决方案将overflow-y: scroll应用于我要滚动的两个div，并且所有父div都已应用max-height: 100%; overflow: hidden。

为什么这不起作用？我应该采取什么样的最佳方法？

＆＃13;

html body {
  margin: 0;
}
#app {
  padding-top: 60px;
  width: 100vw;
  height: 100vh;
  background: black;
  height: calc(100vh - 60px);
}
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  background: cyan;
}
.route-container {
  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: auto;
  grid-template-areas:
    "sidemenu container";
  
  max-height: 100%;
  overflow: hidden;
  
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: sidemenu;
}
.outer-container {
  grid-area: container;
  background: yellow;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "tab-menu"
    "tab-container";
  
  overflow: hidden;
  max-height: 100%;
}
.tab-menu {
  grid-area: tab-menu;
  background: red;
}
.tab-container {
  grid-area: tab-container;
  background: purple;
  
  max-height: 100%;
  overflow: hidden;
}
.content-container {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  grid-template-rows: auto;
  grid-template-areas: "inner-menu inner-content";
  
  max-height: 100%;
  overflow: hidden;
  
  font-size: 144px;
  background: teal;
}
.inner-menu {
  grid-area: inner-menu;
  overflow-y: scroll;
  background: pink;

}
.inner-content {
  grid-area: inner-content;
  overflow-y: scroll;
  background: teal;
}

＆＃13;

<div id="app">
  <div id="navbar">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="tab-menu">
        Tabs
      </div>
      <div class="tab-container">
        <div class="content-container">
          <div class="inner-menu">
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
          </div>
          <div class="inner-content">
            Inner Content 
            Inner Content 
            Inner Content 
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

将height: calc(100vh - 109px);添加到内部菜单和内部内容div

 Total height of window - (height of Tab bar + Navigation bar)

html body {
  margin: 0;
}
#app {
  padding-top: 60px;
  width: 100vw;
  height: 100vh;
  background: black;
  height: calc(100vh - 60px);
}
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  background: cyan;
}
.route-container {
  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: auto;
  grid-template-areas:
    "sidemenu container";
  
  max-height: 100%;
  overflow: hidden;
  
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: sidemenu;
}
.outer-container {
  grid-area: container;
  background: yellow;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "tab-menu"
    "tab-container";
  
  overflow: hidden;
  max-height: 100%;
}
.tab-menu {
  grid-area: tab-menu;
  background: red;
}
.tab-container {
  grid-area: tab-container;
  background: purple;
  
  max-height: 100%;
  overflow: hidden;
}
.content-container {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  grid-template-rows: auto;
  grid-template-areas: "inner-menu inner-content";
  
  max-height: 100%;
  overflow: hidden;
  
  font-size: 144px;
  background: teal;
}
.inner-menu {
  grid-area: inner-menu;
  overflow-y: scroll;
  background: pink;
  height: calc(100vh - 109px); // Total height of window - height of top elements

}
.inner-content {
  grid-area: inner-content;
  overflow-y: scroll;
  background: teal;
  height: calc(100vh - 109px);
}

<div id="app">
  <div id="navbar">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="tab-menu">
        Tabs
      </div>
      <div class="tab-container">
        <div class="content-container">
          <div class="inner-menu">
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
          </div>
          <div class="inner-content">
            Inner Content 
            Inner Content 
            Inner Content 
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

你最深的两个div不会滚动，因为它们实际上并没有过度填充。如果你检查这两个div的高度（以及父div的高度），你可以看到它们的高度接近3000px，有足够的空间容纳你的所有文本。

Dev Tools showing the height of one of the divs

它们似乎被缩小到一个小尺寸，因为.route-container的溢出被隐藏了。参见：

.route-container {
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    grid-template-rows: auto;
    grid-template-areas: "sidemenu container";
    max-height: 100%;
    overflow: hidden;
    background: magenta;
}

要解决此问题，我会使用display: flex;代替display: grid;。结果允许这两个框单独滚动。

html body {
    margin: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    background: black;
    display: flex;
    flex-direction: column;
}

#navbar {
    width: 100vw;
    height: 20vh;
    background: cyan;
}

.route-container {
    display: flex;
    flex-direction: row;
    background: magenta;
    height: 85vh;
}

.outer-side-menu {
    background: orange;
    width: 100%;
}

.outer-container {
    background: yellow;
    display: flex;
    flex-direction: column;
}

.tab-menu {
    background: red;
}

.tab-container {
    background: purple;
}

.content-container {
    display: flex;
    flex-direction: row;
    max-height: 75vh;
    overflow: hidden;
    font-size: 144px;
    background: teal;
}

.inner-menu {
    overflow-y: scroll;
    background: pink;
}

.inner-content {
    overflow-y: scroll;
    background: teal;
}

网格可能限制性太强，不允许内部div滚动而不会同时滚动“Tabs”和“Side Menu”。

Answer 3

好的我明白了。问题是我对height的理解。儿童divs没有采用他们所包含的全高。我需要使用position以及top，left，bottom，right 。

请参阅以下codepen

CSS溢出-y深度嵌套的div

3 个答案: