我对包含侧边栏的简单网格布局有一些样式问题(aside
) 还有一些main
内容。
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
有的页面没有aside
包含在我的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%(对于 25% 是最大的)aside
).
我想到的一些解决方案:
- If no
aside
显示,我可以调整grid-template
仅使用一个网格列:grid-template: auto auto auto 1fr auto / 1fr;
但是,我不知道如何用 CSS 来实现这一点。:has
选择器仍然是工作草案。
- 将第一个网格列的宽度设置为 0。
grid-template: auto auto 1fr auto / 0 1fr;
但是,如果显示了aside,我该如何覆盖此设置?
感谢您的帮助!
定义内部的宽度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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)