gpt4 book ai didi

javascript - CSS媒体查询,如果高度大于500px,如何在div下添加阴影?

转载 作者:行者123 更新时间:2023-12-01 03:30:11 29 4
gpt4 key购买 nike

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

但是,由于我有最大高度和溢出,我还想在底部添加阴影以向用户表明他可以向下滚动。

我想“仅”当 div 的高度达到类中定义的最大高度时添加此阴影。

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

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

我以为只要添加数据就可以在高度达到540时添加盒子阴影,但似乎不是。

不确定我想要实现的目标应该通过 JQuery 完成,还是仍然适用于 css 媒体查询,但以正确的方式?

感谢。

最佳答案

没有。

Here这就是原因。

No, media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.

If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.

--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 中的样式属性。

关于javascript - CSS媒体查询,如果高度大于500px,如何在div下添加阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61418731/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com