dash 用css网格布局,在列里面的内容不溢出浏览器高度,溢出在行出现纵向滚动条
时间: 2023-12-03 13:46:34 浏览: 169
基于Dash灵感的离线文档浏览器C/C++/CSS/HTML设计源码
可以使用 `grid-auto-rows: minmax(0, max-content)` 属性来实现列里的内容不溢出浏览器高度,同时溢出在行出现纵向滚动条的效果。
具体实现方法如下:
1. 在网格容器上设置网格布局:`display: grid`;
2. 设置网格列宽:`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`,这里使用了自适应布局,每个列的最小宽度为 250px,最大宽度为 1fr;
3. 设置网格行高:`grid-auto-rows: minmax(0, max-content)`,这里使用了 `minmax(0, max-content)`,可以让网格行高自适应内容高度,同时,如果内容高度超过了浏览器高度,就会出现纵向滚动条。
示例代码如下:
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(0, max-content);
}
```
注意:这种方式只适用于网格项内部内容高度超出网格容器高度的情况。如果网格项本身就比网格容器高度高,还需要通过其他方式来处理。
阅读全文