Javascript CSS媒体查询，如果div'；s的高度是否大于500px？

所以我有一个包含数据行的div，我们仍然可以添加数据

然而，由于我有一个最大高度和溢出，我还想在底部添加一个阴影，向用户显示他可以向下滚动

我只想在div的高度达到类中定义的最大高度时添加此阴影

 .container {
  max-height: 546px;
  overflow: auto;

  @media (min-height: 540px) {
    box-shadow: 0px 8px 4px -3px #313335;
  }
}

我认为只要我们添加数据，当高度达到540时，这将简单地添加框阴影，但似乎不是

我不确定我想要实现的是通过JQuery完成的，还是仍然可以通过css媒体查询应用，但方式正确

A谢谢。

否

这就是原因

不，媒体查询不是基于页面中的元素设计的。它们设计为基于设备或媒体类型工作（因此称为媒体查询）。宽度、高度和其他基于尺寸的媒体功能都是指基于屏幕的媒体中视口或设备屏幕的尺寸。它们不能用于引用页面上的特定元素

如果需要根据页面上某个div元素的大小应用样式，则必须使用JavaScript来观察该div元素大小的变化，而不是媒体查询

--

现在回答你问题的另一部分，是的

下面是一个片段：

标题
#tDiv{
高度：100vh；
宽度：300px；
背景颜色：绿色；
}
$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
变量高度=$（“#tDiv”）.height（）；
如果（高度>=500）{
$（“#tDiv”）.css（'box-shadow'，'10px 10px 5px#888'）；
}
否则{
$（“#tDiv”）.css（'box-shadow'，'10px 10px 5px透明'）；
}
});
});
试验

这是一个仅限于CSS的解决方案，它依赖于使用

max（）

。Firefox仍然不支持，但很快就会支持

#tDiv{
高度：80vh；
宽度：300px；
边际：0.50px；
背景颜色：绿色；
位置：相对位置；
}
#tDiv:之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：最大值（0px，计算值（500px-100%）；
盒影：0px 8px 4px-3px#313335；
}

---

测试

我注意到你对春分答案的评论：

---

我真的很感激你的回答！澄清了很多事情。现在想知道是否有一些特定的反应而不是JQuery。希望有人能为您发布一个关于这方面的答案，恐怕我自己不能。谢谢：）这也很有帮助。