CSS-Grid:如果侧栏为空，则扩展主
CSS-Grid:如果侧栏为空，则扩展主
提问于 2021-04-14 09:35:03
我有一个简单的网格布局，包含一个侧边栏(aside)和一些main内容的样式问题。
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>在某些页面上，我的html中没有包含aside：
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<main>Some main content</main>
<footer>Footer</footer>
</body>这是我的密码
body {
height: 100%;
display: grid;
/* mobile layout */
grid-template: auto auto auto 1fr auto / 1fr;
grid-template-areas:
"header"
"nav"
"aside"
"main"
"footer";
}
header {
background-color: blue;
grid-area: header;
}
nav {
background-color: aquamarine;
grid-area: nav;
}
aside {
background-color: green;
grid-area: aside;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: orange;
grid-area: footer;
}
/* desktop layout */
@media (min-width: 768px) {
body {
grid-template: auto auto 1fr auto / minmax(300px, 25%) 1fr;
grid-template-areas:
"header header"
"nav nav"
"aside main"
"footer footer";
}
}<body>
<header>Header</header>
<nav>Navigation Links</nav>
<!-- if aside is deleted main should strech whole space-->
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
如果显示侧栏，则它的最小宽度应为300 of。如果侧边栏没有显示，主内容应该占整个宽度。然而，这是不可能的，它仍然只占宽度的75% (25%是最大的aside)。
我想了一些解决办法：
如果没有显示
- ，则可以将
grid-template调整为只使用一个网格列:网格-模板:AUTO1FR auto / 1fr；
但是，我不知道如何使用CSS来完成这一任务。:has选择器仍在工作。
- 将第一个网格列的宽度设置为0。网格-模板:自动1 1fr自动/0 1 1fr；
但是，如果显示了备用设置，如何覆盖此设置？
谢谢你的帮忙!
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-14 10:25:09
定义aside元素内的宽度，并将auto保留在模板中。由于您处理的是全宽度/高度网格，所以可以考虑使用25vw而不是25%。
您必须考虑移动布局，并正确地放置主程序和页脚。
body {
height: 100vh;
margin: 0;
display: grid;
grid-template: auto auto auto 1fr auto / 1fr;
}
header { background-color: blue;}
nav { background-color: aquamarine;}
aside { background-color: green;}
main { background-color: yellow;grid-row:4}
footer { background-color: orange;grid-row:5}
/* desktop layout */
@media (min-width: 768px) {
body {
grid-template: auto auto 1fr auto / auto 1fr;
grid-template-areas: "header header" "nav nav" "aside main" "footer footer";
}
aside {
width: min(300px, 25vw);
}
header { grid-area: header;}
nav { grid-area: nav; }
aside { grid-area: aside;}
main { grid-area: main;}
footer {grid-area: footer;}
}<body>
<header>Header</header>
<nav>Navigation Links</nav>
<!-- if aside is deleted main should strech whole space-->
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
Stack Overflow用户
发布于 2021-04-14 10:33:48
使用fit-content()并为aside指定一个min-width
body {
margin: 0;
min-height: 100vh;
}
.grid {
height: 100vh;
display: grid;
/* mobile layout */
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto) 1fr auto;
grid-template-areas:
"header"
"nav"
"aside"
"main"
"footer";
}
header {
background-color: blue;
grid-area: header;
}
nav {
background-color: aquamarine;
grid-area: nav;
}
aside {
background-color: green;
grid-area: aside;
min-width: 300px;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: orange;
grid-area: footer;
}
/* desktop layout */
@media (min-width: 768px) {
.grid {
grid-template-columns: fit-content(300px) 1fr;
grid-template-rows: repeat(2, auto) 1fr auto;
grid-template-areas:
"header header"
"nav nav"
"aside main"
"footer footer";
}
}<div class="grid">
<header>Header</header>
<nav>Navigation Links</nav>
<!-- if aside is deleted main should strech whole space-->
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</div>
<div class="grid">
<header>Header</header>
<nav>Navigation Links</nav>
<main>Some main content</main>
<footer>Footer</footer>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67089175
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号