html - CSS 深嵌套溢出
问题描述
我有一个 3 列布局,顶部有一个导航。3 列被构造为带有容器的侧菜单,并且在该容器内是另一个带有容器的侧菜单。
我正在努力做到这一点,以便所有 div 都将在视口内滚动,overflow-y: scroll
但在我目前的状态下,它似乎被忽略了,整个页面都在滚动。
不知道我在误解什么。我已经用我目前的状态构建了一个Codepen 。
解决方案
这是你想要的效果吗?
我height
从outer-container
,inner-side-menu
和inner-container
html body {
height: 100vh;
margin: 0;
}
#app {
background: black;
}
.navigation {
background: cyan;
height: 60px;
}
.route-container {
display: grid;
grid-template-columns: 0.25fr 0.75fr;
grid-template-rows: auto;
grid-template-areas:
"outer-side-menu outer-container";
height: calc(100vh - 60px);
background: magenta;
}
.outer-side-menu {
background: orange;
grid-area: outer-side-menu;
}
.outer-container {
background: yellow;
grid-area: outer-container;
display: grid;
grid-template-columns: 0.25fr 0.75fr;
grid-template-rows: auto;
grid-template-areas:
"inner-side-menu inner-container";
/* added */
overflow: scroll;
/* removed height: 100% */
}
.inner-side-menu {
background: lime;
grid-area: inner-side-menu;
font-size: 144px;
/* prevent horizontal scrolling */
overflow-x: hidden;
}
.inner-container {
background: red;
grid-area: inner-container;
font-size: 144px;
/* prevent horizontal scrolling */
overflow-x: hidden;
}
<div id="app">
<div class="navigation">Navigation</div>
<div class="route-container">
<div class="outer-side-menu">Side Menu</div>
<div class="outer-container">
<div class="inner-side-menu">Inner Side Menu Inner Side Menu Inner Side Menu</div>
<div class="inner-container">Inner Container Inner Container Inner Container Inner Container</div>
</div>
</div>
</div>
推荐阅读
- firebase - 'Future 类型的值
Function()' 不能分配给“用户”类型的变量 - r - Add gradient color within groups in ggplot2
- javascript - 谷歌应用脚本中全局变量的增量不起作用
- vue.js - vue js - Cannot read property 'use' of undefined
- python - Python:为什么 '.sort()' 没有按预期工作?
- excel - 检查一个组合框是否为空而另一个不是
- c# - 从 Unity 向 AWS Lambda 函数发送输入参数
- powershell - 如何使用 Format-Table cmdlet 显示所有属性
- flutter - 使用 PDFViewer 包显示带有颤动的 pdf 文件时的 LateError
- botframework - 基于 Bot Framework Composer 中用户输入的 if-else 分支语法