CSS 媒体查询，如果高度大于500px，如何在div 下添加阴影？

Question

So I have a div that contains rows of data and we can still add data.所以我有一个包含数据行的 div，我们仍然可以添加数据。

However, since I have a max-height and overflow, I'd like to also add a shadow at the bottom to show the user that he can scroll down.但是，由于我有最大高度和溢出，我还想在底部添加一个阴影以向用户显示他可以向下滚动。

I'd like to add this shadow "only" when the div's height reaches the max-height defined in my class.当 div 的高度达到我的 class 中定义的最大高度时，我想“仅”添加此阴影。

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

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

I thought that this would simply add the box shadow when the height reaches 540 as long as we add data but seems not.我以为只要我们添加数据，这就会在高度达到 540 时简单地添加框阴影，但似乎没有。

Not sure what I'm tryin to achieve should be done via JQuery or still appliable with css media query but in a correct way?不确定我要实现的目标应该通过 JQuery 完成还是仍然适用于 css 媒体查询但方式正确？

Aprreciated.赞赏。

Answer 1

No.不。

Here is why. 这就是为什么。

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.如果您需要根据页面上某个 div 元素的大小应用 styles，则必须使用 JavaScript 来观察该 div 元素大小的变化，而不是媒体查询。

-- boltclock --螺栓时钟

Now for your other part of your question, yes.现在对于你问题的另一部分，是的。

Here's a snippet:这是一个片段：

 <,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>

I added green to more-easily define the div boundaries on screen but... the function for window re-sizing illustrates that you can capture a div's height and perform a decision based upon it setting the style attributes in JQuery.我添加了绿色以更轻松地在屏幕上定义 div 边界但是... function 用于window 重新调整大小说明您可以捕获 div 的高度并根据它在 JQuery 中设置样式属性来执行决策。

Answer 2

I noticed your comment on Equinox's answer:我注意到您对 Equinox 回答的评论：

truly appreciate your answer.非常感谢您的回答。 Clarified many things.澄清了很多事情。 Now wondering if there is something react specific instead of JQuery. – Ziko 1 hour ago现在想知道是否有特定的反应而不是 JQuery。 – Ziko 1 小时前

And yes there is a more React specific way that doesn't require JQuery.是的，还有一种不需要 JQuery 的 React 特定方式。

Code Explanation代码说明

Using React state hook useState() you can create a function to assign a cssClass prop in your component to toggle on your #tDiv element.使用 React state 钩子useState()你可以创建一个 function 来在你的组件中分配一个cssClass来切换你的#tDiv元素。

In your HTML set className={cssClass} on your #tDiv element so that the cssClass prop value is applied as a class on the element.在您的 HTML 中，在您的#tDiv元素上设置className={cssClass}以便cssClass道具值在该元素上应用为 class。

Finally, with the React effect hook useEffect() add an event listener on window to call a function that will...最后，使用 React 效果挂钩useEffect()在window上添加一个事件侦听器以调用 function，它将...

compare the size of your #tDiv element比较#tDiv元素的大小
if height >= 500px set the cssClass prop to the name of the CSS class to apply on the #tDiv element如果height >= 500px将 cssClass 属性设置为cssClass的名称以应用于#tDiv元素
if not unset the cssClass prop to remove the CSS class that is applied on the #tDiv element如果不取消设置cssClass以删除应用于#tDiv元素的 CSS class

Code Sample代码示例

⚡ CodeSandBox available here: https://codesandbox.io/s/stackoverflow-61418731-k3tz3 ⚡ CodeSandBox 可在此处获得： https://codesandbox.io/s/stackoverflow-61418731-k3tz3

This is the component:这是组件：

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>
  );
}

And this is the CSS for the elevated class that apply box-shadow :这是应用box-shadow的elevated class 的 CSS：

.elevated {
  box-shadow: 10px 10px 5px #888;
}

Answer 3

Here is a CSS only solution that rely on the use of max() .这是一个 CSS 唯一依赖于使用max()的解决方案。 Still not supported with Firefox but will be very soon.仍然不支持 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>

Another idea more supported using clip-path:使用 clip-path 更支持的另一个想法：

 #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>

CSS 媒体查询，如果高度大于500px，如何在div 下添加阴影？

问题描述

3 个解决方案

解决方案1
2 已采纳

解决方案2
1 2020-04-25 00:49:55

Code Explanation代码说明

Code Sample代码示例

解决方案3
0 2020-04-24 23:56:44

CSS 媒体查询，如果高度大于500px，如何在div 下添加阴影？

问题描述

3 个解决方案

解决方案1 2 已采纳

解决方案2 1 2020-04-25 00:49:55

Code Explanation代码说明

Code Sample代码示例

解决方案3 0 2020-04-24 23:56:44

解决方案1
2 已采纳

解决方案2
1 2020-04-25 00:49:55

解决方案3
0 2020-04-24 23:56:44