CSS 网格：使用可用空间但更大时滚动的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43352501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS grid: content to use free space but scroll when bigger
提问by waterproof
I've been working with CSS Grid Layoutsfor the first time and they're awesome. Right now, however, I'm having trouble keeping one of my grid cells under control.
我第一次使用CSS 网格布局，它们很棒。然而，现在我无法控制我的网格单元之一。
What I want is to have an element that takes up the existing free space and no more, scrolling when the content gets too big. My understanding is that a grid size of 1frtakes up a uniform amount of the available space after everything else is calculated. I've tried various sizes such as minmax(auto, 1fr)but to no avail - 1frseems to expand to fit the content which is not what I want. Setting a maximum size size like 100pxis also no good because I want the size to be determined by other elements in the grid.
我想要的是有一个元素，它占用现有的可用空间而不是更多，当内容变得太大时滚动。我的理解是，1fr在计算完其他所有内容后，网格大小会占用统一数量的可用空间。我尝试了各种尺寸，例如minmax(auto, 1fr)但无济于事 -1fr似乎扩展以适应不是我想要的内容。设置最大尺寸大小100px也不好，因为我希望尺寸由网格中的其他元素确定。
Here's the example:
这是示例：
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
overflow-y: scroll;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
<div class="header">column header</div>
<div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
<div class="footer">column footer</div>
</div>What grid declaration (if any) can I use to let the "problem child" scroll on overflow rather than expanding?
我可以使用什么网格声明（如果有）让“问题孩子”在溢出时滚动而不是扩展？
采纳答案by G-Cyrillus
You can use max-height:100%;and also min-heightto leave enough heights to show a proper scrollbar.(firefox will do, chrome will not at this time)
您可以使用max-height:100%;and 也min-height可以留出足够的高度来显示适当的滚动条。（firefox 可以，chrome 暂时不行）
.container {
display: grid;
grid-template-rows: auto minmax(1fr, 25vh) auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
min-height:4em;
max-height:100%;
overflow-y: auto;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
<div class="header">column header</div>
<div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
<div class="footer">column footer</div>
</div>As a work around, you can also use an extra wrapper in absoluteposition to take it off the flow and size it to the row's height: (both cases require a min-height to show properly the scrollbar when needed)
作为一种解决方法，您还可以在absolute适当的位置使用额外的包装器将其从流中取出并将其大小调整为行的高度：（两种情况都需要最小高度以在需要时正确显示滚动条）
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
position:relative;
min-height:4em;
}
.problem-child >div {
position:absolute;
top:0;
left:0;
right:0;
max-height:100%;
overflow:auto ;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
<div class="header">column header</div>
<div class="problem-child">
<div>problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
</div>
<div class="footer">column footer</div>
</div>回答by Varunkumar Nagarajan
Adding on top of @G-Cyr's solution. There should be atleast one element absolutely positioned for max-heightto work. Set container to be absolutely positioned.
添加在@G-Cyr 的解决方案之上。应该至少有一个绝对适合max-height工作的元素。将容器设置为绝对定位。
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
height: 100%;
width: 100%;
position: absolute;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
max-height: 100%;
overflow-y: auto;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
<div class="header">column header</div>
<div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
<div class="footer">column footer</div>
</div>回答by andr1o
There's a more elegant solution, which makes use of viewport height units (vh). Just apply 100vhto your container:
有一个更优雅的解决方案，它使用视口高度单位 (vh)。只需应用于100vh您的容器：
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
height: 100vh; /* <- does the trick */
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
overflow-y: scroll;
}
.footer {
grid-column: 2;
grid-row: 3;
}
body {
margin: 0; /* fixes stackoverflow's markup */
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
<div class="header">column header</div>
<div class="problem-child">problem child:<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique felis eros, et luctus turpis pellentesque nec. Nunc gravida est quis vestibulum tristique. Maecenas consectetur cursus pulvinar. Aenean quis diam sollicitudin nisi ullamcorper consectetur. Nullam dapibus eleifend sollicitudin. Donec ut pulvinar erat, quis suscipit urna. Donec at turpis nunc. Sed diam lectus, tincidunt vel tellus eu, consectetur rhoncus urna. Fusce tempus lectus tellus, sagittis laoreet arcu sagittis vitae. Phasellus varius orci accumsan orci vulputate semper. Maecenas mauris tortor, congue sit amet volutpat pretium, tincidunt et ligula. Donec convallis bibendum nunc at gravida. Pellentesque suscipit, nisl nec commodo tincidunt, metus nibh posuere diam, et finibus nulla mauris scelerisque sem. Maecenas fringilla ullamcorper consectetur.
Nullam non purus vitae nisl scelerisque molestie at et nibh. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum bibendum mattis dignissim. Praesent rutrum ultrices mauris, in maximus orci suscipit iaculis. Ut non neque feugiat, vestibulum massa sed, malesuada nulla. Phasellus eu vehicula odio. Proin vulputate, purus ac posuere pharetra, velit ipsum sollicitudin tellus, ut fermentum sapien risus eu lorem. Nullam viverra mollis finibus. Curabitur cursus lobortis dapibus. Cras aliquet dignissim diam, eu consectetur risus pretium a.
Phasellus consectetur vel tellus et dignissim. Quisque sit amet porta sem, et sagittis sem. Vestibulum blandit tellus enim, sed convallis lectus semper eget. Nunc varius dignissim nunc. Ut ac fringilla justo. Aenean non ex lacus. Mauris pretium egestas facilisis.
Fusce imperdiet turpis vitae tortor tristique, vitae pulvinar erat cursus. Aliquam blandit justo rutrum, efficitur leo vitae, fringilla enim. Cras facilisis dapibus mattis. Duis quis accumsan ipsum. Curabitur consectetur nisi vel mauris tincidunt, sed finibus nisi faucibus. Curabitur efficitur nulla at turpis vehicula congue. Aenean quis nulla id massa elementum commodo quis ut risus. Aliquam congue metus vitae mi dictum aliquet. Nulla facilisi. Donec auctor nisl non turpis scelerisque, ut vestibulum mauris malesuada. Mauris vulputate ut mi vitae congue. Nam ac nulla in neque semper laoreet at in metus.
Cras bibendum, magna ut convallis consectetur, lacus nunc luctus metus, a faucibus quam leo et dui. Nam non sagittis lacus. In leo dui, euismod a tellus eu, volutpat cursus libero. Praesent suscipit mollis turpis, eu imperdiet lorem imperdiet in. Suspendisse potenti. Ut bibendum semper ante, at blandit enim feugiat ut. Nullam eu vehicula lorem. Curabitur maximus ipsum ex, eget mattis urna consectetur id.</div>
<div class="footer">column footer</div>
</div>回答by Carsten Luxig
If you define another grid within problem-child, then again it's not rendered correctly.
You have to push down the overflow: autoattribute from any parent-grid to children.
Check the given codepen:
如果您在 中定义另一个网格problem-child，则它再次无法正确呈现。您必须将overflow: auto属性从任何父网格下推到子网格。检查给定的代码笔：
body {
height: 100vh;
display: grid;
grid-template-rows: 30px 1fr 20px;
margin: 0;
}
.header {
background: green;
}
.footer {
background: magenta;
}
.page {
overflow: auto;
}
.container{
height: 100%;
display: grid;
grid-template-rows: 30px 1fr 1fr 30px;
}
.fill-content {
background: red;
overflow: auto;
}
.fix-content {
background: yellow;
}
.large {
background: blue;
width: 100%;
height: 150px;
}<div class="header">Page HEader
</div>
<div class="page">
<div class="container">
<div class="fix-content"></div>
<div class="fill-content">
<div class="large">fill content 1 by vertical space or scroll it (red layer is filled, blue makes it scrolling)</div>
</div>
<div class="fill-content">
<div class="large">fill content 2 by vertical space or scroll it (red layer is filled, blue makes it scrolling)</div>
</div>
<div class="fix-content"></div>
</div>
</div>
<div class="footer">Page Footer</div>