如何将最大高度设置为CSS网格 [英] How to set max height to a CSS grid

问题描述

我有以下CSS网格:

.grid-3x4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-areas:
      'a b c '
      'd e f'
      'g h i'
      'l m n';
    }

我希望网格具有固定的100vh高度，而不管模板区域的内容如何.我试图插入:

I want the grid to have a fixed height of 100vh, despite the content of the template areas. I tried to insert:

max-height : 100vh;

到.grid-3x4类，但不起作用.我还尝试将网格包装在另一个类中，在包含类上设置最大高度，但是没有运气.我该怎么办?

to the .grid-3x4 class but is not working. I also tried to wrap the grid inside another class, setting the max-height on the containing class but no luck. How can I do this?

推荐答案

max-height (最大高度)设置容器高度的限制.您需要设置 min-height (最小高度)，以强制容器始终具有该最小高度.

max-height (maximum height) sets a limit on the height of a container. You need to set a min-height (minimum height) to force a container to always have that minimum height.

一种简单的方法是将每个单元格的最小和最大高度设置为100vh(我以10vh进行了示例，因此无需滚动即可看到):

A simple way to do is just to set that every cell within has a minimum and maximum height of 100vh (I did the example with 10vh so you could see without scrolling):

https://jsfiddle.net/ppvo9y32/2/

您还应该设置一个 overflow (例如， overflow:hidden )，以控制内容超出单元格边界时发生的情况.

You should also set an overflow (for example, overflow: hidden) to control what happens when the content goes out of the boundaries of the cell.

这篇关于如何将最大高度设置为CSS网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！