CSS trick: div height to container height

Struggled the other day to find a solution to this problem

My inner div needed to get the container div-s height and keep it when resizing the window size.

Problem - it didn't work. Setting the height: 100% just wouldn't work.

 

Solution to setting the inner div's height to container div's height

You need to specify the container div's height. Only then the inner div will get it's height of 100% - the browser knows how to calculate the 100% if the height has been specified before.

 

Now this is actually an essential lack of functionality on the CSS side... or the browsers' side.

When inspecting an element, even when it has no CSS height specified, the browser is still able (Chrome) to calculate and display the div's current height. Why not use that as the basis of the height: 100%?

Let's hope in the future it will!

About me

Iinstructor of robotics (LEGO Mindstorms), computer teacher, IT support, web dev, currently studying cyber-physical systems engineering.

If you found a solution here, would you consider donating $25,000 for my next project?

Just kidding, 1$ would do fine.

Hope you found what you needed. Thanks for stepping by.