所以我有一个包含数据行的div，我们仍然可以添加数据。
然而，由于我有一个最大高度和溢出，我也想在底部添加一个阴影，向用户显示他可以向下滚动。
我想"仅"在div的高度达到类中定义的最大高度时添加此阴影。
.container {
max-height: 546px;
overflow: auto;
@media (min-height: 540px) {
box-shadow: 0px 8px 4px -3px #313335;
}
}
我以为只要我们添加数据，当高度达到540时，这只会简单地添加框阴影，但似乎没有。
不确定我试图实现的应该通过JQuery完成，或者仍然可以应用于css媒体查询，但以正确的方式？
已关联。
否。
原因如下。
不，媒体查询不是根据页面中的元素设计的。它们被设计为基于设备或媒体类型工作(因此被称为媒体查询(。宽度、高度和其他基于尺寸的媒体功能都是指基于屏幕的媒体中视口或设备屏幕的尺寸。它们不能用于引用页面上的某个元素。
如果您需要根据页面上某个div元素的大小应用样式，则必须使用JavaScript来观察该div元素大小的变化，而不是媒体查询。
-boltclock
现在，关于你问题的另一部分，是的。
这里有一个片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#tDiv{
height: 100vh;
width:300px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(window).resize(function(){
var height = $("#tDiv").height();
if(height >= 500){
$("#tDiv").css('box-shadow', '10px 10px 5px #888');
}
else{
$("#tDiv").css('box-shadow', '10px 10px 5px transparent');
}
});
});
</script>
</head>
<body>
<div id="tDiv">TEST</div>
</body>
</html>我添加了绿色以更容易地在屏幕上定义div边界，但。。。窗口重新调整的函数说明了您可以捕获div的高度，并根据它在JQuery中设置样式属性来执行决策。
我注意到你对Equinox答案的评论：
💬非常感谢您的回答！澄清了很多事情。现在想知道是否有特定于react的东西而不是JQuery。–Ziko 1小时前
是的，有一种更具体的React方式不需要JQuery。
代码说明
使用React状态挂钩useState()，您可以创建一个函数，在组件中分配一个cssClass道具来切换#tDiv元素。
在HTML中，在#tDiv元素上设置className={cssClass}，以便将cssClass属性值作为类应用于该元素。
最后，使用React效果挂钩useEffect()在window上添加一个事件侦听器来调用一个函数，该函数将。。。
- 比较
#tDiv元素的大小 - 如果
height >= 500px将cssClass道具设置为要应用于#tDiv元素的CSS类的名称 - 如果未取消设置
cssClass道具以删除应用于#tDiv元素的CSS类
代码示例
⚡此处提供CodeSandBox：https://codesandbox.io/s/stackoverflow-61418731-k3tz3
这是组件：
import React from "react";
import "./styles.css";
export default function App() {
const [cssClass, setCssClass] = React.useState();
React.useEffect(() => {
// triggered function when window is resized
function handleResize() {
// target the #tDiv element
const tDiv = document.querySelector("#tDiv");
// compare the height
if (tDiv.clientHeight >= 500) {
// set `cssClass` prop to toggle on #tDiv
setCssClass("elevated");
} else {
// unset `cssClass` prop to remove "elevated" class on #tDiv
setCssClass(null);
}
}
// add event listener on window.resize
window.addEventListener("resize", handleResize);
// remove event listener when component is destroyed
return _ => window.removeEventListener("resize", handleResize);
});
// `cssClass` will reflect the prop value to toggle CSS class
return (
<div id="tDiv" className={cssClass}>
Resize the height of your browser to see me elevate!
</div>
);
}
这是应用box-shadow:的elevated类的CSS
.elevated {
box-shadow: 10px 10px 5px #888;
}
这里有一个仅支持CSS的解决方案，它依赖于max()的使用。Firefox仍然不支持，但很快就会支持。
#tDiv {
height: 80vh;
width: 300px;
margin:0 50px;
background-color: green;
position:relative;
}
#tDiv:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:max(0px,calc(500px - 100%));
box-shadow: 0px 8px 4px -3px #313335;
}<div id="tDiv">TEST</div>另一个更支持使用剪辑路径的想法：
#tDiv {
height: 80vh;
width: 300px;
margin:0 50px;
background-color: green;
position:relative;
}
#tDiv:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
clip-path:polygon(0 0,100% 0,100% calc(200% - 500px),0 calc(200% - 500px));
box-shadow: 0px 8px 4px -3px #313335;
}<div id="tDiv">TEST</div>