CSS网格：嵌套网格弄乱了高度
.component-container {
width: 800px;
height: 200px;
background-color: lightyellow;
border: 1px solid red;
padding: 10px;
overflow: hidden;
/* display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
*/
}
.component-container .grid-container-1 {
display: grid;
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 50px 1fr 50px;
grid-gap: 3px;
padding: 3px;
height: 100%;
width: 100%;
background-color: #2196F3;
}
.component-container .grid-container-1 .grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid darkblue;
overflow: auto;
}
.component-container .grid-container-1 .grid-header {
grid-column: 1/span 3;
grid-row: 1;
}
.component-container .grid-container-1 .grid-nav {
grid-column: 1;
grid-row: 2/span 1;
}
.component-container .grid-container-1 .grid-content-left {
grid-column: 2;
grid-row: 2;
}
.component-container .grid-container-1 .grid-content-right {
grid-column: 3;
grid-row: 2;
}
.component-container .grid-container-1 .grid-footer {
grid-column: 1/span 3;
grid-row: 3;
}
.component-container .grid-container-2 {
padding: 3px;
height: 100%;
width: 100%;
background-color: #b1f3cc;
}
我有一个 SCSS，它使用网格来设计我的页面样式。请注意垂直滚动条。
现在，我想在这个表格的右侧再添加一个div。所以我在这个div后面添加一个div，并将display:grid添加到这两个div的容器中。结果，这些滚动条消失了，因为它们的 div 高度被搞乱了。
请取消 SCSS 中第 9-11 行的注释。
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
那里发生了什么事？
红糖糍粑2回答
-
慕莱坞森
auto该行为可能与隐式创建的网格行中关键字的计算结果相关。auto是与最大内容相同的关键字（如果它是最大值）。作为最小值，它表示占用网格轨道的网格项的最大最小尺寸（由 min-width/min-height 指定）。例如，当grid-auto-rows(或grid-template-rows) 属性设置为时100%，如下所示，问题得到解决：.component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-rows: 100%;}.component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-rows: 100%;}.component-container .grid-container-1 { display: grid; grid-template-columns: 150px 1fr 1fr; grid-template-rows: 50px 1fr 50px; grid-gap: 3px; padding: 3px; height: 100%; width: 100%; background-color: #2196F3;}.component-container .grid-container-1 .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid darkblue; overflow: auto;}.component-container .grid-container-1 .grid-header { grid-column: 1/span 3; grid-row: 1;}.component-container .grid-container-1 .grid-nav { grid-column: 1; grid-row: 2/span 1;}.component-container .grid-container-1 .grid-content-left { grid-column: 2; grid-row: 2;}.component-container .grid-container-1 .grid-content-right { grid-column: 3; grid-row: 2;}.component-container .grid-container-1 .grid-footer { grid-column: 1/span 3; grid-row: 3;}.component-container .grid-container-2 { padding: 3px; height: 100%; width: 100%; background-color: #b1f3cc;}button { margin: 2px; width: 500px;}<div class="component-container"> <div class="grid-container-1"> <div class="grid-item grid-header"> One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-nav"> One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-content-left"> <button type="button">Click Me!</button> One <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-content-right"> <button type="button">Click Me!</button> One <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-footer"> One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> </div> <div class="grid-container-2"> Lorem Ipsum </div></div> -
牛魔王的故事
将你的 SCSS 变成 CSS。“问题”是你的网格对于高度没有限制，所以它会渲染到它需要的高度。如果你禁用你会看到overflow: hidden;所以只需添加：grid-template-rows: 100%;网格将遵循 div 的高度并且不会溢出。.component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; grid-gap: 10px;}.component-container .grid-container-1 { display: grid; grid-template-columns: 150px 1fr 1fr; grid-template-rows: 50px 1fr 50px; grid-gap: 3px; padding: 3px; height: 100%; width: 100%; background-color: #2196F3;}.component-container .grid-container-1 .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid darkblue; overflow: auto;}.component-container .grid-container-1 .grid-header { grid-column: 1 / span 3; grid-row: 1;}.component-container .grid-container-1 .grid-nav { grid-column: 1; grid-row: 2 / span 1;}.component-container .grid-container-1 .grid-content-left { grid-column: 2; grid-row: 2;}.component-container .grid-container-1 .grid-content-right { grid-column: 3; grid-row: 2;}.component-container .grid-container-1 .grid-footer { grid-column: 1 / span 3; grid-row: 3;}.component-container .grid-container-2 { padding: 3px; height: 100%; width: 100%; background-color: #b1f3cc;}button { margin: 2px; width: 500px;}<div class="component-container"> <div class="grid-container-1"> <div class="grid-item grid-header"> One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-nav"> One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-content-left"> <button type="button">Click Me!</button> One <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-content-right"> <button type="button">Click Me!</button> One <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> <div class="grid-item grid-footer"> One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br> </div> </div> <div class="grid-container-2"> Lorem Ipsum </div></div>
随时随地看视频慕课网APP
相关分类
Html5