在下面的界面中,(上一个).panel
(使用flex
设置样式)将不会滚动到上一个(子).item
的底部边缘下方,即使最后一个.item
(像所有其他)的margin-bottom
应该为12px
。
这就是我要实现的目标:
当我向下滚动时,我想查看最后一个12px
的.item
底边距。
这里是界面:
.interface {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 60px 0;
font-family: sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(159, 0, 0);
opacity: 1;
}
.header,
.footer {
position: fixed;
left: 0;
z-index: 12;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: rgb(159, 0, 0);
box-shadow: 0 0 6px rgba(15, 0, 0, 0.4);
}
.header {
top: 0;
}
.heading {
margin: 0;
padding: 0;
}
.footer {
bottom: 0;
}
.credit {
margin: 0;
padding: 0;
}
.intro {
height: 60px;
margin: 0;
padding: 0;
line-height: 60px;
font-size: 20px;
text-transform: uppercase;
text-align: center;
background-color: rgba(127, 0, 0, 0.4);
box-shadow: 0 0 6px rgba(15, 0, 0, 0.4);
}
.panel {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: calc(100vh - 180px);
padding-top: 12px;
overflow-y: scroll;
box-sizing: border-box;
transform: translateY(0);
}
.item {
flex: 0 1 30vw;
height: 160px;
margin: 12px;
line-height: 160px;
text-align: center;
text-shadow: 1px 1px 1px rgba(31, 0, 0, 0.4);
background-color: rgba(47, 0, 0, 0.4);
border: 1px solid rgb(95, 0, 0);
}
@media only screen and (max-width: 906px) {
.item {
flex: 0 1 44vw;
}
}
@media only screen and (max-width: 590px) {
.item {
flex: 0 1 96vw;
}
}
<aside class="interface">
<header class="header">
<h2 class="heading">Title</h2>
</header>
<p class="intro">Text-based introduction here.</p>
<div class="panel">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
<footer class="footer">
<p class="credit">Credit</p>
</footer>
</aside>
N.B。打开上方的Code Snippet
到整页。
解决此问题的一种方法是使用::after
伪元素,如下所示:
.panel::after {
content: '';
display: block;
width: 100vw;
height: 12px;
background-color: transparent;
}
这将重新创建不会显示的12px
底部页边空白。
由于包括::after
伪元素的唯一原因是作为“ helper”,这有点不明智。 (但仍然比包装器<div>
更具吸引力。)
具有::after
伪元素的接口的工作示例:
.interface {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 60px 0;
font-family: sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(159, 0, 0);
opacity: 1;
}
.header,
.footer {
position: fixed;
left: 0;
z-index: 12;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: rgb(159, 0, 0);
box-shadow: 0 0 6px rgba(15, 0, 0, 0.4);
}
.header {
top: 0;
}
.heading {
margin: 0;
padding: 0;
}
.footer {
bottom: 0;
}
.credit {
margin: 0;
padding: 0;
}
.intro {
height: 60px;
margin: 0;
padding: 0;
line-height: 60px;
font-size: 20px;
text-transform: uppercase;
text-align: center;
background-color: rgba(127, 0, 0, 0.4);
box-shadow: 0 0 6px rgba(15, 0, 0, 0.4);
}
.panel {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: calc(100vh - 180px);
padding-top: 12px;
overflow-y: scroll;
box-sizing: border-box;
transform: translateY(0);
}
.item {
flex: 0 1 30vw;
height: 160px;
margin: 12px;
line-height: 160px;
text-align: center;
text-shadow: 1px 1px 1px rgba(31, 0, 0, 0.4);
background-color: rgba(47, 0, 0, 0.4);
border: 1px solid rgb(95, 0, 0);
}
.panel::after {
content: '';
display: block;
width: 100vw;
height: 12px;
background-color: transparent;
}
@media only screen and (max-width: 906px) {
.item {
flex: 0 1 44vw;
}
}
@media only screen and (max-width: 590px) {
.item {
flex: 0 1 96vw;
}
}
<aside class="interface">
<header class="header">
<h2 class="heading">Title</h2>
</header>
<p class="intro">Text-based introduction here.</p>
<div class="panel">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
<footer class="footer">
<p class="credit">Credit</p>
</footer>
</aside>
N.B。打开上方的Code Snippet
到整页。