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!

Post Author: Tom Pai