代码之家 › 专栏 › 技术社区 › instead

设置行高以适应CSS网格中的内容高度

css-grid css html

instead · 技术社区 · 9 年前

我有一个两列两行的网格。我必须将两个网格项放在一列(右侧)和一个左侧。然后我希望右列中的第一个元素的最大高度等于其内容高度。我怎样才能做到这一点?

我现在面临的问题是,右边这两个项目有50%的高度,我找不到方法将第一个设置为最小可能高度,另一个设置为其余高度(自动)。

我只是想澄清一下- 每个项目的高度不固定 . 下面你可以看到它现在的样子。

还有一件事, 由于响应性网页设计。

.grid{
  display: grid;
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}

<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>

2 回复 | 直到 9 年前

Michael Benjamin William Falcon 9 年前

您只需要将第一行设置为 auto (内容高度)和第二行 1fr (消耗剩余空间)。

.grid{
  display: grid;
  grid-template-rows: auto 1fr; /* NEW */
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}

<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>

Obsidian Age 9 年前

您可以使用 height: fit-content 为了确保元素与中包含的内容的高度匹配。。。但请注意,第二个框仍将保留其原始位置:

.grid{
  display: grid;
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
  height: fit-content;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}

<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>

虽然我不知道如何让第二个框跳起来,使第一个框与网格布局匹配,但如果您愿意使用,那么想要达到的效果将非常简单 flexbox .

只需添加 display: flex 到 .grid ,并创建新的 .right 包含 .top_right 和 .bottom_right . 然后可选 flex: 1 对双方 .left 和 .正当 :

.grid {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
  background: #c7ffae;
}

.top_right {
  background: #ffa4a4;
  height: fit-content;
}

<div class="grid">
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu
    molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis.
    Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero.</div>
  <div class="right">
    <div class="top_right">I'm top right</div>
    <div class="bottom_right">I'm bottom right</div>
  </div>
</div>

注意,您还需要移动果岭 background 从…起到为了让它伸展整个高度。

这会管用的 across all major browsers .

希望这有帮助!:)