Change background-color when div is bigger than parent - css

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

Related

Should all HTML containers have css height 100%

I'm very confused over the CSS style height: 100% and page layouts overall.
I typically end up setting html, body, and basically every container to height: 100% because if I want to have let's say 4 elements that split the height evenly, I can set them to height: 25%. Otherwise they will just take up their internal heights and could look really silly. And without their parents set to 100%, well, it won't work at all.
So fine, I give every container height: 100%. But then this has a bad effect if I have another page that should be able to scroll because it has a lot of vertical content and no defined heights. Yes, it will still scroll, but the child element is now technically outside main containers as evident through dev tools.
I think Bootstrap used to set height to 100% for html and body, but they no longer do (maybe I am wrong). Is this a bad design practice overall? What should I do instead of I want some pages to essentially not scroll and some to scroll?
Hope it makes sense and that this fiddle helps explain what I mean.
https://jsfiddle.net/jpzeqs1c/
I'm not sure about where you got the idea that every css element needs a 100% height, and it does not need to be used on every single container. Each container is used for different purposes, therefore you need to add the appropriate height, whether that is in px, vh, percents, etc. You can search pixels, percents, and viewport heights to find out which one is most suitable for your div containers. 100% for html and body is fine though. Overflows can be handled with overflow-x and overflow-y, and if you want to be able to scroll through the content you can use something like
overflow-x:scroll;
It's important to understand that height does not limit the height of the element and if the content does not fit within the height, it will overflow. Handling that overflow is done with the overflow property which specifics what happens if content overflows an element box.
For example adding overflow: hidden to your class, will prevent your element from overflowing:
.h100 {
height: 100%;
overflow: hidden;
}
Adding overflow: auto on the other-hand will add a scroll bar to the overflow if clipped, which is the intended behavior a lot of times. Keep in mind that if you only want overflow on a certain axis you can use overflow-x or overflow-y.
To to answer your question and if it's a bad practice no it's not a bad practice and regarding how to cause some containers to scroll and some not, this is done with the overflow property.
More info and useful resources:
Overflow - https://www.w3schools.com/cssref/pr_pos_overflow.asp
Height - https://www.w3schools.com/cssref/pr_dim_height.asp

Can anyone one figure this out CSS height quirk

Ok this has me completely stumped, have been trying to fix for days with no avail.
I have used cbpFWTabs.js to split my content.
It however seems to behave very odd in that it ignores my height parameters and will set the div to the content size.
Only way to stop this is to set a fixed height, but i would like the div to dynamically resize to fill the rest of the screen and display scroll bars if it exceeds the content-wrap div (keeping the menubar fixed).
I've checked all parents, it just doesn't seem respond to anything i try :(
Example here:
http://numerco.com/wp-content/uploads/NUA/scratch.html
I'm sure its somthing trivial i missed but its driving me insane.
Thanks !
Whenever you have height: 100% on an element, that means it will inherit the height of its parent.
Thus, the first thing you need to do is set height: 100% on the .container so that its height takes up the full height of the body.
Then, set height: 100% on the .container > section. Then, the children know to stretch to the correct height (which has been propagated down from body).
This should solve the question in your OP. However, it seems like there's still something fishy going on with your heights. Feel free to ask another question if you need to.

Child Dynamic Height with Fixed Parent Height

I have a parent element with a fixed height, with 2 child elements.
The first element is dynamic in height, according to its content (or collapsed nature).
I want the 2nd element to be as high as it can be, until reaching the end of the parent's height. The trick is, I want it to be scrolled if it has more content than its height.
Here is a Fiddle demonstrating this. Notice the 2nd section is cut - I'm trying to get it to scroll. Of course I can have overflow: auto, but I want only the child div to scroll, and not the entire parent.
I solved this with Javascript and it worked fine.
However, due to some glitches and animations, it didn't look all that smooth.
I tried searching for a CSS only solution, but nothing I did came close to solving this. Is there a way, or am I bound to dynamic calculations in JS ?
.parent {
max-height: 250px;
overflow: hidden;
}
Edit: Fiddle had incorrect link, fixed now.

Making Flexible Height Containers for Responsive Design

I'm trying to make my site responsive and I'm having trouble creating containers divs where their height responds to the content within them. I've tried setting height to 100% but it's not working for.
Most of the content blocks are flowing below each other as I resize my browser but the containers aren't expanding to fit around them.
HomePage
Does anyone know do I have anything fundamentaly wrong in how the page is built that is preventing me from acheiving this?
Cheers.
You need to clear your floats. One example is .mission-statement. When you have multiple divs floating inside a div, the container collapses on itself. In your case, it's only partially collapsing because you have a min-height set.
You do this easily by doing something like this:
.mission-statement:after {
clear: both;
display: table;
content: '';
}
To affect all divs you can change .mission-statement:after to div:after
Images will automatically have a height of 100% of the image relative to the width and the percent tag is percent of the browser window. What you may want is a width tag that might be max-width=*px and let the height be determined by the image itself.
Instead of letting me write you an answer I will refer to a really good thread about this. The solution anyway is something called clearfix.
css - What is clearfix?

css positioning issue with float and margin

This is my example on jsfiddle http://jsfiddle.net/YG6tx/5/
so my question is, why is the red div(pageWrap) not taking the height of it's inner elements?
If I specify a float:left, it takes the height, but the margin: 0 auto no longer holds.
how can I acheive both? (margin:0 auto + the div needs to take the height ).
Do I need to specify the height explicitly?
I'm a newbie, so this question might seem simple.
Designing with floats and absolutely positioned element is hard... Their parent elements won't wraparound them so often you'd have to specify the height attribute on the parent to accomplish the look you want. However, the .topLeft wouldn't exactly need to have the float:left; property. If you remove that I think you'll get the desired look. Example: http://jsfiddle.net/YG6tx/8/
Just give overflow:hidden to #pagewrap.
Try this updated fiddle: http://jsfiddle.net/YG6tx/12/
As in you original fiddle there were no images due to incorrect path of images so in my fiddle also no images but as per your requirement i have changes the layout.
As per your requirement images are at position, red div taking entire height as per elements inside and center also margin:0 auto;
If i am lagging some where please comment so i can change as per requirement.

Resources