CSS网格:如果侧边栏为空，则拉伸main

本文介绍了CSS网格:如果侧边栏为空，则拉伸main的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用简单的网格布局(包含侧边栏( 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 aside is displayed, I could adjust grid-template to use only one grid column:

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

但是，我不知道如何用CSS完成此操作.:has 选择器仍在起作用.

将第一个网格列的宽度设置为0.

However, I do not know how accomplish this with CSS. :has selector is still working draft.

Set width for first grid column to 0.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！