Question

我有一个3列（css网格）的设计。第二列具有需要垂直滚动的嵌套网格内容，而其他两列则保持各自的高度。我给第二个嵌套列溢出了，但是我还需要给它顶部和底部填充或边距。我的解决方案可以在不使用顶部/底部填充的情况下工作，但是当我添加它时，它将强制滚动常规屏幕，从而强制滚动其他屏幕。

这是小提琴：https://jsfiddle.net/n2fole00/cger28v4/

这是使用滚动和填充的代码部分。

.section-column-grid-container {
  display: grid;
  align-content: start;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-gap: 35px;
  background-color: grey;
  height: 100vh;  
  padding: 35px;
  overflow-y: scroll;
}

.section-column-grid-container > div {
  background-color: pink;
  text-align: center;
  padding: 0;
  font-size: 18px;
  height:100px;
}

我该如何解决？谢谢。

Answer 1

我对您的代码进行了一些更改，这是更新的小提琴：

Updated fiddle link

请检查并确认您是否在寻找以下内容：我所做的主要更改是：

.main-grid-container {
 overflow: hidden;
}

顶部/底部填充溢出普通屏幕

1 个答案: