仅在内容溢出时添加边框

Question

想知道是否可以仅在内容溢出时添加边框。

我将尝试解释我的意思。假设我有一个 200px*200px 的窗口，我在 200px*100px 内有另一个带有红色背景的窗口，这意味着窗口的底部是蓝色背景。

我添加overflow-y:auto到红色窗口。红色窗口当前有文字，完美地填充了 200*100 窗口。现在我添加了额外的文本行，以便红色窗口现在可以滚动。所以我想要做的是，当红色窗口变得可滚动时，我希望在红色和蓝色窗口之间出现一个边框。

.firstBox {
  width: 200px;
  height: 100px;
  background: #FFA07A;
  overflow-y: auto;
  border-bottom: 5px solid red;
  /*  I want the border-bottom ONLY when the text overflows */
}

.secondBox {
  width: 200px;
  height: 100px;
  background: #89CFF0;
}

<div class="bigBox">
  <div class="firstBox">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat dapibus ipsum. Sed egestas tortor in ultrices euismod. Sed laoreet bibendum tincidunt. Donec id hendrerit tellus. Nulla aliquet libero volutpat odio consequat fringilla. Maecenas aliquam,
      enim at elementum maximus, sem metus semper leo, sit amet cursus orci quam euismod justo. Suspendisse mattis magna nisl, nec dictum nisi commodo ut. Maecenas accumsan leo justo, id commodo mi posuere non. In vitae pellentesque mi, quis molestie
      velit.
    </p>
  </div>
  <div class="secondBox">

  </div>
</div>

另见 JSFiddle：https ://jsfiddle.net/zs4f2j9n/

Answer 1

Here is a trick using sticky position. The idea is to have a pseudo element that will cover all the area minus a small part at the bottom then we use a sticky element that will be hidden behind and will only appear at the bottom and will stick there on the scroll:

.first {
  width: 200px;
  height: 200px;
  background: #FFA07A;
  display: inline-block;
}

.second {
  background: #89CFF0;
  height: 100px;
  overflow: auto;
  position: relative;
  z-index: 0;
}

.second::after {
  content: "";
  display: block;
  position: sticky;
  z-index: -2;
  bottom: 0;
  height: 5px;
  background: #000;
}

.second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5px;
  background: inherit;
}

<div class="first">
  <div class="second">
    lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
  </div>
</div>
<div class="first">
  <div class="second">
    lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
  </div>
</div>

如果您希望边框占据所有宽度并表现得像 aborder-bottom您可以添加一个额外的包装器：

.first {
  width: 200px;
  height: 200px;
  background: #FFA07A;
  display: inline-block;
  vertical-align:top;
}

.second {
  background: #89CFF0;
  height: 100px;
  position: relative;
  z-index: 0;
}
.second p {
  overflow: auto;
  max-height:100%;
  margin:0;
}

.second::after {
  content: "";
  display: block;
  position: sticky;
  z-index: -2;
  bottom: 0;
  height: 5px;
  background: #000;
}

.second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /*no need to consider the space in this case*/
  background: inherit;
}

<div class="first">
  <div class="second">
    <p>lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum</p>
  </div>
</div>
<div class="first">
  <div class="second">
   <p> lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum</p>
  </div>
</div>