html - 如何处理网格溢出?
问题描述
我创建了一个 codepen 来说明我现在面临的问题 https://codepen.io/marcdaframe/pen/qeBWNd
<div>
123 abc
<div class="container">
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
</div></div>
Hello World
</div>
* {box-sizing: border-box;}
.container{
height: 25%;
overflow-y: scroll;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: 100px 200px;
}
我有一个容器,它的高度以百分比定义(它确实可以设置绝对值,但我无法使用绝对值或 vh),网格将在 25% 高的 div 中,并且任何溢出都应该滚动,但是div 中的网格不尊重这一点。
解决方案
当您使用 height:25% 时,您需要定义 25% 的内容。如此有效地使 25% 工作,您需要为所有父容器提供 100% 的高度,直到 body 和 html。
实际上,您的 25% 工作所需的额外样式是:
html,body {
height:100%;
}
body > div {
height:100%;
}
注意:只有“容器” div的父 div 需要上述 div 样式。希望它可以帮助您理解问题。
推荐阅读
- typescript - 在邮递员正文中传递电子邮件和密码时出现验证管道错误
- android - Xamarin Android(使用带有本机库的绑定库)
- python - 如何使用 python 和 boto3 在 AWS 中获取免费层级 AMI
- mongodb - 连接到 127.0.0.1:27017 :: 时出错,由 :: Connection refused mongodb 引起
- javascript - 遍历列表时如何动态使用useReducer?
- docker - Docker 容器运行 -d 标志
- javascript - Yii2 图表未定义
- pyspark - 从 Notebook 的下拉菜单中获取参数
- .net - 疑难解答 - 如何在 Windows 2008 Server SP2 上启用 TLS 1.2
- rust - 有没有办法在 Serde 的序列化输出中添加一个常量字段?