html - 仅在内容溢出时添加边框

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/

标签： htmlcss

Answer 1

这是一个使用sticky位置的技巧。这个想法是有一个伪元素，它将覆盖所有区域减去底部的一小部分，然后我们使用一个粘性元素，它将隐藏在后面，只会出现在底部并粘在滚动条上：

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