CSS网格:容器外部的出血背景 [英] Css-grid: Bleed background outside container
问题描述
考虑以下三列网格布局，该布局在容器上具有最大宽度约束:
Consider the following 3-column grid layout with max-width constraint on container:
.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>
理想情况下，当视口宽度大于max-width时，我想在容器外部散放页眉和页脚的背景，但请像示例中那样将网格及其结构保持在max-width之内( includes 页眉和页脚的内容.
Ideally, I would like to bleed background of header and footer outside the container when viewport width is above max-width, but keep grid and its structure within max-width as in example (including inner content of header and footer).
我已经考虑过以下方法:
I have considered these approaches:
- 忘记最大宽度的容器，使用具有minmax的全宽容器并将全跨度div的背景颜色放置在页眉和页脚下方( https://codepen.io/anon/pen/BGvoxx ).我也不喜欢这种方法，因为我不理解为什么当100％小于100％时，它根本不起作用. 900px(为什么不添加负填充)，它也向网格中添加了两个额外的列.
- Forget max-width container, use full width container with minmax'es and position full-span divs with background-color underneath header and footer(https://codepen.io/anon/pen/OaryXj). I don't like this approach because it adds extra elements purely for styling and because it adds two extra columns (I can live with this one probably, using named columns)
- Use same approach as above, but instead of adding extra divs, use full-span header and footer with "padding: 0 calc((100% - 900px)/2);" (https://codepen.io/anon/pen/BGvoxx). I don't like this approach either, because I don't understand why it works at all when 100% < 900px (why negative padding is not added) and it adds two extra columns to the grid as well.
还有其他想法吗?某些calc()魔术具有负边距和页眉/页脚填充?
Any other ideas? Some calc() magic with negative margins and padding on header / footer?
推荐答案
如果仅涉及背景和颜色，则可以使用伪元素来产生溢出效果:
if it's only about background and coloration you can use pseudo element to have the overflow effect:
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网格:容器外部的出血背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
