html - 网格布局 2 列垂直尺寸相互独立

Question

我创建了这个 jsFiddle显示问题。

代码如下:

HTML:

<div id="container">
  <div id="left-col">
    LEFT
  </div>
  <div id="right-col1">
    RIGHT1
  </div>
  <div id="right-col2">
    RIGHT2
  </div>
  <div id="right-col3">
    RIGHT3
  </div>
</div>

CSS:

#container {
  display: grid;
  grid-template-columns: 15% 1fr;
  grid-template-areas:
  "left_area right_area1"
  "left_area right_area2"
  "left_area right_area3";
}

#left-col {
  grid-area: left_area;
}

#right-col1 {
  grid-area: right_area1;
}

#right-col2 {
  grid-area: right_area2;
}

#right-col3 {
  grid-area: right_area3;
}

当我在左栏中有大的垂直内容时，它会自动拉伸(stretch)右栏，而我在右栏中的内容没有按我想要的方式显示。

我的目标是在无法取消链接的情况下，让右列成为两列垂直尺寸的驱动因素。

有没有办法:

• 使网格的垂直尺寸独立(似乎不太可能或者它不再是网格)？
• 授权左侧列溢出，以便右侧列的大小优先？

当然感谢任何其他帮助。

Answer 1

这是因为您的容器 div 根据内部较大的 div 增长。

如果你想让右边的列独立于左边的列，你必须创建 2 个容器 div :

<div id="container-left">
 <!-- Your left content -->
</div>
<div id="container-right">
 <!-- Your right content -->
</div>