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

Question

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

任何大于此高度和该div都将overflow滚动条。

现在，如果我想在没有滚动条时显示边框，我将如何实现。

谢谢。

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>

Answer 2

使用 JQuery 这相对简单：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ($('#yourDiv').height() < 350) {//AS YOU ASK, UNDER 350PX
$('#yourDiv').css("border-color", "red");
$('#yourDiv').css("border-style", "solid");
}
});
</script>
<div id="yourDiv" style="height:349px;">
<p> your div will have red border because of height being under 350px</p>
</div>

Answer 3

使用媒体查询 css ：

#TestDiv{
overflow: scroll;
}
@media only screen and (max-width: 350px) {
#TestDiv{
overflow: hidden;
}
}