我正在尝试对子级网格进行分层。我有一个侧边栏,该侧边栏覆盖了跨越网格整个宽度的全高英雄图像,因此侧边栏将其覆盖。我似乎无法弄清楚如何将包含图像的网格子项对齐到视口的顶部。
https://codepen.io/coreybruyere/pen/jQqZdp
body {
margin: 0 0 0 0;
}
#container {
display: grid;
grid-template-columns: 25% 75%;
grid-template-rows: 100%;
}
.section.hero {
padding:0;
img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
}
#left {
background-color: aquamarine;
position: sticky;
top: 0;
height: 100vh;
box-sizing: border-box;
z-index: 10;
}
// This should be aligned to the top
#right {
background-color: beige;
grid-column: span 2;
}
答案 0 :(得分:0)
如果您希望边栏为25%,图像为其他75%,请使用grid
。
body {
margin: 0 0 0 0;
}
#container {
display: grid;
grid-template-columns: 25% 75%;
}
.section.hero {
padding: 0;
}
img {
height: 100vh;
width: 100%;
object-fit: cover;
}
#left {
background-color: aquamarine;
height: 100vh;
}
#right {
background-color: beige;
height: 100vh;
}
<div id="container">
<div id="left" class="section">
<p>This should not scroll</p>
</div>
<div id="right" class="section hero">
<img src="http://placekitten.com/g/2000/2000" alt="">
</div>
</div>
如果您希望图像为全角,则无需使用grid
body {
margin: 0;
}
img {
height: 100vh;
width: 100%;
object-fit: cover;
}
#left {
background-color: aquamarine;
height: 100vh;
width: 25%;
position: absolute;
z-index: 1;
}
#right {
background-color: beige;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
<div id="container">
<div id="left" class="section">
<p>This should not scroll</p>
</div>
<div id="right" class="section hero">
<img src="http://placekitten.com/g/2000/2000" alt="">
</div>
</div>
答案 1 :(得分:0)
通过此CSS弄清楚了。需要在子元素上为grid-column-start
,grid-column-end
和grid-row-start
指定值。
body {
margin: 0 0 0 0;
}
#container {
display: grid;
grid-template-columns: 25% 75%;
}
.section.hero {
padding: 0;
}
img {
height: 100vh;
width: 100%;
display: block;
}
#left {
background-color: aquamarine;
height: 100vh;
grid-row-start: 1;
grid-column-start: 1;
z-index: 10;
}
#right {
background-color: beige;
height: 100vh;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
}