CSS media query, how can I add a shadow under a div if it's height is bigger than 500px?

Question

So I have a div that contains rows of data and we can still add data.

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.

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

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?

Aprreciated.

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

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

I truly appreciate your answer! Clarified many things. Now wondering if there is something react specific instead of JQuery. — Ziko, Apr 24 '20 at 23:24
Hopefully someone can post an answer in regards to that for you, I myself cannot I'm afraid. — , Apr 24 '20 at 23:26

j3ff · Answer 2 · 2020-04-25T01:28:44.780

I noticed your comment on Equinox's answer:

truly appreciate your answer! Clarified many things. Now wondering if there is something react specific instead of JQuery. – Ziko 1 hour ago

And yes there is a more React specific way that doesn't require JQuery.

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.

In your HTML set className={cssClass} on your #tDiv element so that the cssClass prop value is applied as a class on the element.

Finally, with the React effect hook useEffect() add an event listener on window to call a function that will...

compare the size of your #tDiv element
if height >= 500px set the cssClass prop to the name of the CSS class to apply on the #tDiv element
if not unset the cssClass prop to remove the CSS class that is applied on the #tDiv element

Code Sample

⚡ CodeSandBox available here: 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:

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

Temani Afif · Answer 3 · 2020-04-25T00:06:09.540

Here is a CSS only solution that rely on the use of max(). Still not supported with Firefox but will be very soon.

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

#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 media query, how can I add a shadow under a div if it's height is bigger than 500px?

3 Answers3

Code Explanation

Code Sample