CSS网格:如果侧边栏为空，则拉伸main [英] CSS-Grid: Stretch main if sidebar is empty
问题描述
使用简单的网格布局(包含侧边栏( aside )和一些 main 内容)时，我几乎没有样式问题.
I've got little styling issues with a simple grid layout, containing a sidebar (aside) and some main content.
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
在某些页面上，我的html中没有 aside .
On some pages there is no aside included in my html:
<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>如果显示侧边栏，则其最小宽度应为300px.如果未显示侧边栏，则主要内容应占整个宽度.但是不可能，它仍然仅占用宽度的75％( aside 最多为25％).
If the sidebar is displayed, it should have a minimum width of 300px. If sidebar is not displayed main content should take the whole width. However its not possible, its still taking only 75% of the width (25% are max for aside).
我想到的一些解决方案:
Some solutions i thought about:
- 如果没有显示
aside，我可以将grid-template调整为仅使用一个网格列:
- If no
asideis displayed, I could adjustgrid-templateto use only one grid column:
grid-template: auto auto auto 1fr auto / 1fr;
但是，我不知道如何用CSS完成此操作.:has 选择器仍在起作用.
However, I do not know how accomplish this with CSS. :has selector is still working draft.
grid-template: auto auto 1fr auto / 0 1fr;
但是，如果显示"aside"，如何覆盖此设置?
However, how can I override this setting if aside is displayed?
感谢您的帮助！
推荐答案
在 aside 元素内定义宽度，并将 auto 保留在模板中.由于您要处理的是全宽/高度网格，因此可以考虑使用 25vw 而不是 25％.
Define the width inside the aside element and keep auto in the template. Since you are dealing with a full width/height grid, you can consider the use of 25vw instead of 25%.
您还必须考虑移动布局，并正确放置main和footer
You have to aslo consider the mobile layout and correctly place both main and footer
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>这篇关于CSS网格:如果侧边栏为空，则拉伸main的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
