Css-grid:在容器外流血背景-6ren

Css-grid:在容器外流血背景

转载作者：行者123 更新时间：2023-12-04 12:44:15

24

4

考虑以下对容器具有最大宽度约束的 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;
}

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

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

我考虑过这些方法:

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

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

最佳答案

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

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;
}

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

关于Css-grid:在容器外流血背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53550846/

24

4

0

文章推荐： uml - 事件图中的两个流可以执行相同的操作吗？

文章推荐： intellij-idea - 如何仅在主编辑器窗口上启用 IdeaVim？

html - 外 Angular 圆形设计气球
我试图弄清楚如何为聊天气泡制作外 Angular 圆形设计，以获得所需的结果: 我必须使用气泡作为不同背景的组件，没有相同和纯色，但有一些设计元素，所以气泡周围的空间必须是透明的: 我试过将元素添加为
css - 文本显示在 block 外
我尝试了 display:table-cell 但它没有用。我怎样才能在div中显示这个词。现在它显示溢出了 div。我在我的网页上使用 CSS2。提前致谢。 Visit W3Schools
javascript - 滑入菜单 - Canvas 外
我有一个使用 CSS 隐藏在 View (对于移动设备)之外的菜单: #filter-column { position:absolute; left:-400px; } 当用户单击链
css - 如何使用CSS将单选按钮定位在 block 外
我想创建一个这样的问题行 http://imageshack.us/photo/my-images/200/questionh.png/ 此时我的html源是: question label
Ruby:const_set 外 block ？
我要mock a class with Ruby . 如何编写处理样板代码的方法？以下代码: module Mailgun end module Acani def self.mock_mail
Java标签？外、中、内
请不要担心循环，但我的问题是关于这些关键字:outer、middle 和 inner。它们不是声明为实例变量，为什么IDE让代码编译？我在谷歌上搜索了一下，这是java标签吗？ Java中的某种关键字
除少数指定值 R 外，将所有单元格替换为 0
我有一个数据框(df)，看起来像， Id Name Activity. 1 ABC a;sldkj kkkdk 2 two
elasticsearch - 除了Elasticsearch中的反向索引(它使搜索如此之快)外，内存中还加载了什么？
Elasticsearch内存中有哪些东西可以使搜索如此快速？是所有json本身都在内存中，还是仅倒排索引和映射将在内存中24 * 7？最佳答案这是一个很好的问题，然后简而言之就是: 不仅仅是数
java - 除 I.D 外，没有数据添加到数据库中
我正在尝试添加用户在用户界面上选择的值。对于数据库中的特定列，我已经与数据库建立了连接，当我按“保存”时，新的 id 会添加到数据库中，控制台中不会显示任何错误，但我要提交的值不会放入数据库，我怎样才
CCS PIC16F628A ROM 外、A 段或程序太大
我不确定这个问题是否应该涉及电子领域，但由于它是关于编程的，所以我在这里问了它。我正在制作一个数字时钟，使用由移位寄存器供电的 LED，而不是 7 段显示器。无论如何，当使用 CCS 编译代码时，我
html - div 内的文本选择显示在 div 外
我希望用户在 div 中选择文本 (html)。然而，这样做会在浏览器中显示选择背景，也在 div 之外。我可以用(参见 http://jsfiddle.net/lborgman/aWbgT/)来防
html - Shift
block 外
我有以下 Razor View @{ ViewBag.Title = "UserCost"; }
javascript - Canvas 工具提示出现在 Canvas 外？
我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时，我使用 KineticJS 让我弹出工具提示。但是，由于 Canvas 的边界，工具提示似乎被切断了。有没
programming-languages - 除 C++ 外，哪些编程语言支持运算符重载？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
java - 除index.xhtml 外，JSF 页面未执行
我正在使用 primefaces 学习 Java Web 和 jsf。我的项目当前只有一个index.xhtml 文件，当我访问localhost:8080/appname/时，index.xhtm
iphone - 不让 UIButton 拖到 Circle 外
我是 ios 新手。我有一个 View ，其中我使用 Quarts 核心绘制了一个圆圈。我在该圆圈中放置了一个 UIButton，并赋予了拖放该按钮的功能。现在我想要限制按钮不能被拖出那个圆圈区
javascript - 除加法 (+) 外，所有 JavaScript 算术运算符均有效
这个问题已经有答案了: How to add two strings as if they were numbers? [duplicate] (20 个回答) How to force JS to
jquery - 在不触发滚动条的情况下将元素定位在 css 动画的视口(viewport)外
我正在创建简单的文本从右侧滑动到页面的 css 动画。我正在使用 jQuery 通过向元素添加一个类来触发动画。但是起始位置必须在视口(viewport)之外，这会触发底部滚动条出现。如何预防？这是
ruby - 有没有办法访问 block 外 block 内定义的局部变量？
我编写了一个简单的代码来评估一段代码并将输出写入文件。这样它减少了我的一些，因为我需要很多很多文件，每一行都包含返回值! 无论如何，我正在使用的代码是: #!/usr/bin/ruby -w def
ios - 抄袭。除 sprite 外，处处填满屏幕
所以我试图在我的一款游戏中加入一个非常基本的“手电筒”式的东西。我让它工作的方式是在我的游戏屏幕顶部有一个层，这个层会绘制一个黑色矩形，不透明度约为 80%，在我的游戏场景顶部创建黑暗的外观。 cc

首页

博学

6Ren·AI

商城

Css-grid:在容器外流血背景