Change background-color when div is bigger than parent

Question

For design purpose, I need to change the background-color of a div when its child is bigger than it. The parent div has a fixed height:

height: calc(~'100% - 112px');
overflow-x: auto;
overflow-y: auto;

and the child has no height precised so it takes all the place it needs.

The children displays a grid, and when we reach the end of the grid the client believes there's still content that the site didn't load; we need to change the color so it's clear there no data anymore. Problem, the change of color is not nice looking when we do it even if there's not enough data.

As we use less, I was thinking about using a condition, where I could specify that if the height of the children is higher than the parent's height, the background-color is different. But it looks that what I want to do is not as easy as I thought.

Can I check if the overflow is shown to put my condition? Can I do that in pure CSS / Less or do I have to do it in js?

Thanks in advance for your answers :)

I don't think it is possible with css. But you can do it easily with js/jquery by checking the height of the elements — Pons Purushothaman, Oct 06 '17 at 08:51
It's not, because of this: https://stackoverflow.com/questions/23667208/calc-not-working-within-media-queries — roberrrt-s, Oct 06 '17 at 09:06
@Roberrrt Thanks for the link, now I understand I was trying something impossible :p — Lyzvaleska, Oct 06 '17 at 09:08
Well, 'impossible' is a big word, you can achieve this with some simple javascript, if that's allowed. — roberrrt-s, Oct 06 '17 at 09:22
most people do a fade-out overlay at the bottom so if there is more content you know to scroll down, if there isn't then the fade-out won't cover anything so won't be seen — Pete, Oct 06 '17 at 09:27

Change background-color when div is bigger than parent

0 Answers0