CSS-grid：容器外的背景出血

Question

CSS-grid：容器外的背景出血

kut*_*tas 4 css background-color css-grid

考虑以下对容器具有最大宽度约束的 3 列网格布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 56px minmax(56px, auto) 56px;
  max-width: 300px;
  margin: auto;
}

header {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 1 / 2;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
  grid-row: 2 / 3;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
  grid-row: 2 / 3;
}

footer {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 3 / 4;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <body>
    <div class='container'>
      <header>Header</header>
      <main>Main</main>
      <aside>Sidebar</aside>
      <footer>Footer </footer>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

理想情况下，当视口宽度高于最大宽度时，我希望在容器外部出血页眉和页脚的背景，但将网格及其结构保持在最大宽度内，如示例所示（包括页眉和页脚的内部内容）。

我考虑过这些方法：

忘记最大宽度容器，使用具有最小最大宽度的全宽容器，并将带有背景颜色的全跨度 div 放置在页眉和页脚下方（https://codepen.io/anon/pen/OaryXj）。我不喜欢这种方法，因为它纯粹为了样式而添加了额外的元素，并且因为它添加了两个额外的列（我可能可以接受这个，使用命名列）
使用与上面相同的方法，但不要添加额外的 div，而是使用带有“padding: 0 calc((100% - 900px)/2);”的全跨度页眉和页脚；（https://codepen.io/anon/pen/BGvoxx）。我也不喜欢这种方法，因为我不明白为什么它在 100% < 900px 时完全起作用（为什么不添加负填充），并且它还在网格中添加了两个额外的列。

还有其他想法吗？一些带有负边距和页眉/页脚填充的 calc() 魔法？

Answer 1

Tem*_*fif 5

如果它只是关于背景和颜色，你可以使用伪元素来产生溢出效果：

body {
 overflow-x:hidden;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 56px minmax(56px, auto) 56px;
  max-width: 300px;
  margin: auto;
}

header {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 1 / 2;
  position:relative;
}
header:before,
footer:before{
  content:"";
  z-index:-1;
  position:absolute;
  top:0;
  bottom:0;
  left:-100vw;
  right:-100vw;
  background:inherit;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
  grid-row: 2 / 3;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
  grid-row: 2 / 3;
}

footer {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 3 / 4;
  position:relative;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <body>
    <div class='container'>
      <header>Header</header>
      <main>Main</main>
      <aside>Sidebar</aside>
      <footer>Footer </footer>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	5046 次
最近记录：	7 年，1 月前