目前我无法在不复制元素类格式的情况下将 content-2
排除在粘性内容之外。
.superlongcontent {
height: 1000px;
background-color: red;
}
.sticky {
height: 300px;
position: sticky;
top: 0rem;
height: calc(100vh - 20rem);
overflow-y: auto;
background-color: blue;
}
.content-1 {
height: 600px;
background-color: yellow;
}
.content-2 {
height: 50px;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9 col-md-12 col-12 superlongcontent">
</div>
<div class="col-lg-3 col-md-12 col-12 sticky">
<div class="content-1"></div>
<div class="content-2 outsidesticky"></div>
</div>
尽管我想要实现的是将 content-2
(绿色框)放在粘性溢出内容的正下方。结果:
.superlongcontent {
height: 1000px;
background-color: red;
}
.sticky {
height: 300px;
position: sticky;
top: 0rem;
height: calc(100vh - 20rem);
overflow-y: auto;
background-color: blue;
}
.content-1 {
height: 600px;
background-color: yellow;
}
.content-2 {
height: 50px;
background-color: green;
}
.sticky2 {
height: 50px;
position: sticky;
top: 0rem;
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9 col-md-12 col-12 superlongcontent">
</div>
<div class="col-lg-3 col-md-12 col-12 sticky">
<div class="content-1"></div>
</div>
<div class="col-lg-3 col-md-12 col-12 sticky2">
<div class="content-2 outsidesticky"></div>
</div>
如果可能的话,我不想像我目前的尝试那样复制类(class):
<div class="col-lg-3 col-md-12 col-12 sticky">
<div class="content-1"></div>
</div>
<div class="col-lg-3 col-md-12 col-12 sticky2">
<div class="content-2 outsidesticky"></div>
</div>
有没有更好的方法可以达到同样的效果?
最佳答案
希望这能解决您的问题。
.superlongcontent {
height: 1000px;
background-color: red;
}
.wrapper {
height: 300px;
position: relative;
top: 0rem;
height: calc(100vh - 20rem);
overflow-y: auto;
background-color: blue;
}
.content-1 {
height: 600px;
background-color: yellow;
/*Below css is for demo purpose only - to show the 'end' text*/
display: flex;
align-items: flex-end;
}
.content-2 {
height: 50px;
background-color: green;
}
.this-is-sticky {
position: sticky;
bottom: 0;
width: 100%;
left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9 col-md-12 col-12 superlongcontent">
</div>
<div class="col-lg-3 col-md-12 col-12 wrapper">
<div class="content-1">
<span>END</span>
</div>
<div class="content-2 this-is-sticky"></div>
</div>
关于html - CSS 从溢出中排除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57623058/