css - 仅当 div 的高度大于一定数量时才显示边框

Question

假设我有一个最大高度为 350px 的 div。

任何大于此高度和 div 的内容都将溢出并带有滚动条。

现在，如果我想要在没有滚动条的情况下显示边框，我该如何实现。

谢谢。

Answer 1

不要认为只用 CSS 是可能的。

但是，您可以使用 scrollHeight 属性。

var mydiv = document.querySelectorAll('.test');


for (var i = 0; i <= mydiv.length -1 ; i++) {
    var scrollHeight = mydiv[i].scrollHeight;
    if (scrollHeight < 350) 
    {
        mydiv[i].classList.add('border');
    }
}

.test{
  max-height: 350px;
  overflow: auto;
}

.border{
  border: 1px solid black;
}

<div class="test">
	I'm Boredered because i have no overflow <br>
	I'm Boredered because i have no overflow <br>
	I'm Boredered because i have no overflow <br>
</div>
<br>
<div class="test">
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
	I'm Borederless because i have overflow <br>
</div>