html - CSS网格: row not taking full height space available

Question

我想使用 CSS 网格(而不是 Flexbox)实现一个非常简单的布局:

目前我有这个(类似，但有一个不需要的空白白色区域):

我的问题是我的示例代码中缺少什么部分来实现所需的布局？

这个问题似乎与这个问题非常相似:How to make CSS Grid items take up remaining space?
还有这个:How do you collapse unused row in a CSS grid?

但是...有点复杂，因为我还有一行

我在最后一行有一个绿色的 div，最后一行需要随着页面高度而增长。
为此，最后一行的行模板设置为 1fr .

我当前的代码

您可以查看下面非常简单的代码片段:

html {
    height: 100%;
}
body {
    height: 100vh;
}
.container {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: min-content auto 1fr;
    height:100%;
}

.red-cube {
    background-color: red;
    width: 100%;
    Height: 180px;
    grid-column: 1;
    grid-row: 1 / 3;
}
h1, h2 {
    margin: 0;
    padding: 0;
}
.blue-title {
    background-color: blue;
    grid-column: 2;
    grid-row: 1;
    height: fit-content;
}
.yellow-div {
    background-color: yellow;
    grid-column: 2;
    grid-row: 2;
    height: 100%;
}
.green-content {
    background-color: green;
    grid-column: 1 / 3;
    grid-row: 3;
    align-self: stretch;
}

<div class="container">
    <div class="red-cube"></div>
    <h1 class="blue-title">Title</h1>
    <div class="yellow-div"><h2>Second line</h2></div>
    <div class="green-content"><p>Some text</p></div>
</div>

或者使用 Codepen here 上的代码片段.

失败的方法

我测试了设置grid-template-rows的解决方案黄色行的值为 1fr消耗剩余的可用空间。 (我之前提到的Stackoverflow问题的解决方案)

即更换grid-template-rows: min-content auto 1fr;与 grid-template-rows: min-content 1fr 1fr;

但这会破坏需要随页面高度增长的绿色 div，因为我们将有两行设置为 1fr .

结论

我想知道是否有一种解决方案，无需切换到flexbox或创建多个网格布局(重新组织布局)。

我也不想通过放置以下内容来“硬编码”行高: grid-template-rows: 1.25rem auto 1fr;

Answer 1

看起来最简单的解决方案是嵌套网格设置(不要与 subgrid 混淆)。将 .green-content div 移到 .container 网格之外。然后将 body 设置为包含两行的网格 - 第一行的高度为 180px，第二行的高度为 1fr。 180 像素行将作为 .container 网格的父级。请注意，如果您不想使用整个页面，您还可以使用除 body 之外的其他元素作为父网格。下面的代码片段是一个工作示例

html {
    height: 100%;
}

body {
    height: 100vh;
    display: grid;
    grid-template-rows: 180px 1fr;
}

.container {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: max-content 1fr;
}

.red-cube {
    background-color: red;
    width: 100%;
    height: 180px;
    grid-column: 1;
    grid-row: 1 / 3;
 }

h1, h2, p {
    margin: 0;
    padding: 0;
}

.blue-title {
    background-color: blue;
    grid-column: 2;
    grid-row: 1;
    height: fit-content;
 }

 .yellow-div {
    background-color: yellow;
    grid-column: 2;
    grid-row: 2;
    height: 100%;
 }

.green-content {
    background-color: green;
    margin-top: 0;
}

<div class="container">
    <div class="red-cube"></div>
    <h1 class="blue-title">Title</h1>
    <div class="yellow-div"><h2>Second line</h2></div>
</div>
<div class="green-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac accumsan eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum in magna eu luctus. Fusce feugiat lectus tortor, eget consectetur augue convallis non. Aliquam massa tortor, fermentum eu nibh non, sollicitudin molestie mi. Ut nec eros sagittis sapien tristique accumsan. Vivamus dapibus, nulla vitae facilisis volutpat, velit odio viverra nisl, non tempor erat mi condimentum velit. Duis posuere sem arcu, venenatis condimentum lorem efficitur eu. Quisque et mi quis lorem pellentesque ultrices. Ut felis lacus, vestibulum sit amet libero non, viverra condimentum turpis. Phasellus massa quam, vestibulum sit amet fermentum molestie, egestas in velit. Donec tristique tempus urna. Nullam pellentesque volutpat mattis. Nunc volutpat orci vel dolor ultrices vestibulum.

Aenean volutpat lacus vitae vehicula semper. Nunc volutpat auctor ligula. Nulla sed augue sem. Vestibulum suscipit ante ac mi viverra, quis feugiat orci posuere. Quisque sit amet tortor luctus, mollis neque a, varius velit. Maecenas sed pulvinar eros, at pretium diam. Duis tellus leo, blandit eget turpis eu, ultricies condimentum dolor. Aliquam erat volutpat. Duis convallis enim lacus, vitae placerat dui dictum convallis. Suspendisse viverra magna vel tellus condimentum, vel pharetra lacus rhoncus. Nam quis mattis elit. Nullam ultricies metus odio, a lobortis quam pharetra sed. Suspendisse vestibulum ullamcorper neque, condimentum euismod ex venenatis ac. Aenean vitae ex eget ligula ultricies condimentum. Donec quis nibh nec massa rutrum dignissim non eget tortor.

Praesent sollicitudin varius diam vel hendrerit. Ut sit amet finibus turpis, sit amet rutrum quam. Sed vestibulum tortor vel quam viverra ullamcorper. Aliquam erat volutpat. Sed gravida, risus vitae dignissim ornare, felis ante vestibulum sapien, nec tempor eros arcu in enim. Nullam suscipit mollis arcu non aliquet. Aenean sit amet nisl dui. In euismod turpis et velit pellentesque fringilla. Ut ut quam lobortis neque egestas pulvinar ac nec ante. Donec tortor odio, posuere eget congue vitae, accumsan eget nisl. Curabitur nunc urna, elementum id erat a, viverra maximus eros. Proin dictum eget ante eget aliquam. Aenean sit amet diam imperdiet, lobortis diam ultricies, dapibus velit.

Morbi neque lectus, cursus in sagittis quis, sollicitudin ac elit. Aenean porta dui in euismod bibendum. Morbi lacus felis, mattis nec feugiat non, laoreet et nibh. Suspendisse mauris arcu, fringilla vitae dolor a, finibus venenatis metus. Etiam justo nunc, eleifend pretium nibh nec, euismod luctus justo. Pellentesque risus leo, congue vel metus a, gravida volutpat arcu. In iaculis sollicitudin tincidunt.

Donec ac leo id nisl malesuada viverra et id libero. Aliquam scelerisque efficitur ipsum a imperdiet. Curabitur porttitor lorem quis orci luctus, at tincidunt leo tempor. Aenean condimentum feugiat sapien, id mattis justo dignissim a. Cras quis odio a quam euismod placerat et in ex. Nulla consequat scelerisque nisl eget faucibus. Mauris eros mauris, ultricies sit amet ex accumsan, pellentesque sagittis tortor. Nam fringilla interdum quam, sed ullamcorper neque egestas id. Proin sed mattis tortor, ac auctor arcu. Cras eu neque mauris. Praesent gravida, libero eget ornare tincidunt, nibh justo consequat lorem, mattis facilisis nibh massa eu urna.</p></div>

这可能不是最优雅的解决方案，但它使您不必困惑 calc() 或在 rems 中定义特定高度。