我在这个例子中使用了 CSS 网格。在这种情况下,网格包含什么并不是很重要。
容器
如此例所示,我使用了
容器
.wrap
具有红色背景。我希望 aside
和 main
行跨越整个 .wrap
并填充它。这意味着红色背景将不再可见,被灰色和白色覆盖。如此例所示,我使用了
1fr
,但在这种情况下没有太多作用。 我也尝试过auto
,但没有任何区别。
* {
padding: 0;
margin: 0;
color: #fff;
}
.wrap {
height: 300px;
background: red;
}
.content {
background: green;
display: grid;
grid-template-areas: "header header"
"aside main"
"footer footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 48px 1fr 50px;
}
header {
grid-area: header;
background: black;
}
aside {
grid-area: aside;
background: #333;
}
main {
grid-area: main;
background: #fff;
color: #000;
}
footer {
grid-area: footer;
background: blue;
}
<div class="wrap">
<div class="content">
<header>Header</header>
<aside>Aside</aside>
<main>Main</main>
<footer>Footer</footer>
</div>
</div>
aside
和main
设置显式的height: 500px
与grid
的初衷相违背,也不是OP想要的。 - Andy Hoffman