Question

我设法创建了一个非常简单的布局，以便<div class="content">填充剩余的可用高度。

HTML：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page">
        <div class="header">HEADER</div>
        <div class="nav">NAV</div>
        <div class="content">CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

CSS：

.page {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: 100vh;
}

在该功能中，我可以添加一个新行，如此

<div class="page">
    <div class="header">HEADER</div>
    <div class="nav">NAV</div>
    <div class="filter">FILTER</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

然后，我需要再次更改CSS

grid-template-rows: auto auto auto 1fr auto;

那么，有没有办法告诉CSS制作所有行auto，包括将来添加的行，但只需将<div class="content">保留到1fr

这样我就可以动态添加行而无需不断更改css。感谢

如何在使用CSS网格布局时定义行的高度？

0 个答案: