css - 当父高度不固定时,将子元素限制为父高度
问题描述
是否可以防止设置为的 css 网格容器中的孩子溢出height: 80%
?
当 css 网格行设置为 时1fr
,它很容易被其子级溢出。
.bottom
我的主要目标是限制&的高度.side
,
并让ul
元素填充.side
元素,同时拥有overflow-y: scroll
.side
应始终为.bottom
.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
height: 80%;
max-height: 300px;
width: 500px;
margin: 0 auto;
border: 1px solid #000;
display: grid;
grid-template-rows: 72px 1fr;
}
.top {
background-color: cyan;
}
.bottom {
background-color: #e9eaf4;
display: grid;
grid-template-columns: 224px 1fr;
grid-column-gap: 24px;
}
.bottom .side,
.bottom .main {
background-color: #fff;
}
ul {
list-style: none;
border: 1px dashed red;
}
ul span {
padding: 10px;
font-size: 20px;
}
<div class="container">
<div class="top">top</div>
<div class="bottom">
<div class="side">side
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
</ul>
</div>
<div class="main">main</div>
</div>
</div>
解决方案
调整如下代码(检查评论)。了解min-height
技巧的相关问题防止内容扩展网格项
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
height: 80%;
max-height: 300px;
width: 500px;
margin: 0 auto;
border: 1px solid #000;
display: grid;
grid-template-rows: 72px 1fr;
}
.top {
background-color: cyan;
}
.bottom {
background-color: #e9eaf4;
display: grid;
grid-template-columns: 224px 1fr;
grid-column-gap: 24px;
min-height:0; /* added */
}
.bottom .side,
.bottom .main {
background-color: #fff;
display:flex; /* added */
flex-direction:column; /* added */
min-height: 0; /* added */
}
ul {
list-style: none;
border: 1px dashed red;
overflow:auto; /* added */
}
ul span {
padding: 10px;
font-size: 20px;
}
<div class="container">
<div class="top">top</div>
<div class="bottom">
<div class="side">side
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
</ul>
</div>
<div class="main">main</div>
</div>
</div>
推荐阅读
- java - 如何在android上的服务中显示对话框
- docker - docker 端口映射符号:5432/tcp vs 0.0.0.0:5432->5432/tcp 有什么区别?
- java-8 - Java 8 流已被操作或关闭
- excel - 循环通过过滤列表时偏移标题的正确方法?
- javascript - 关闭对话框时不要突出显示单元格?
- javascript - 如何根据javascript中的系统范围主题将道具发送到变量?
- swift - 键盘显示时如何以编程方式移动StatView
- javascript - 将数据传递给路由导航 React Native
- typescript - 如何正确模拟 Jest 的一些方法类?
- azure - 如何确定事件中心每秒传入的消息?