响应式CSS网格布局，位置：固定 [英] Responsive CSS Grid layout with position: fixed

问题描述

我正在使用CSS Grid Layout构建一个响应式模板（仍在学习中），由于这里的一些人，我已经完成了大部分工作。

I'm building a responsive template with CSS Grid Layout (still learning) and thanks to a few of you on here, I've got most of it working.

• 移动设备（最大宽度：767px）

• mobile (max-width: 767px)

• 所有内容都应显示在自己的行上

平板电脑（最小宽度：768像素）

tablet (min-width: 768px)

• 导航位于第一行


• 放在一边，主要位于第二行

桌面（最小宽度：992px）

desktop (min-width: 992px)

• 与平板电脑相同但水平间距为10％

xl桌面（最小宽度：1920像素）

xl desktop (min-width: 1920px)

• 与台式机相同，但最大宽度为1920px

问题是我正在使用标头标记为左右间距着色导航。无论我使用标题还是div，似乎都没有一个仅用于为空白空间着色的空容器。
是否有一种方法可以让我在整个顶部应用 position：fixed ？

The thing is I'm using a header tag to color the spacing to the left and right of the nav. Whether I use a header or a div, it doesn't seem right having an empty container just for coloring the empty space. Is there a way of doing this in a way that lets me apply position: fixed on the entire top section?

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */

@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  aside {
    grid-column: 1;
  }
  main {
    grid-column: 2;
  }
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */

@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  header {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */

@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<header></header>
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

https ：//jsfiddle.net/90kotz8d/1/

推荐答案

如果我了解您的意图，那么您并不是真的使用标题作为间距，您实际上是在使用它来获得覆盖所有空间的蓝色背景。

If I understand your intent, you are not really using header for spacing, you are really using it to get the blue background to cover all the space.

由于您似乎还希望徽标和登录名与边界，我认为没有任何可行的解决方案可以通过导航进行此操作。

Since you seem also wanting the logo and login to vertically align with the boundaries, I don't think that there is any posible solution to do this with the nav.

因此，我能找到的唯一解决方案是使用伪元素。至少这是更语义的。我摆脱了媒体查询，因为现在它们不在这里发挥作用：

So, the only solution that I could find involves using a pseudo element. At least this is more semantic. I got rid of the media queries, since now they don't play a role here:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
}

.container::after {
    content: "";
    background-color: blue;
    grid-column: 1 / 5;
    grid-row: 1;
    z-index: -1;
}

a {
  text-decoration: none;
  color: white;
}


nav {
  background: blue;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}
nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }

<div class="container">
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>
</div>

这篇关于响应式CSS网格布局，位置：固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！