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

这是使用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>

如果您希望边框占据所有宽度并表现得像border-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>

https://caniuse.com/#feat=css-sticky

Answer 2

如果您使用jQuery，并且该框的大小保持不变，则可以在文本中看到使用

触发溢出的字符数。

var l = $.trim($("p").text()).length;

这将为您提供一个数字，该数字代表触发溢出后文本中的字符数（假设为50），然后您可以编写一个“ if”，如果该数字大于50，则该字符将设置底部边框这是一种愚蠢的方式，但是它起作用了，所以只分享我的想法。干杯

仅在内容溢出时添加边框

2 个答案: