html - CSS 从溢出中排除元素

Question

目前我无法在不复制元素类格式的情况下将 content-2 排除在粘性内容之外。

正如您在以下全屏 fiddle 中注意到的那样，结果是:

.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>

有没有更好的方法可以达到同样的效果？

Answer 1

希望这能解决您的问题。

.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>