Combine responsive and semi responsive

[alpkank]

Hi all,
I want to combine responsive elements with a semi-responsive element.
I want to have a menu bar at top; height:1em; width:100%;

And use the rest of the window for 9 responsive rectangles that will float left and resize based on the window size.

I know how to define these responsive squares but I cannot figure out how to define the container size that will hold them.

I simply want to say the container needs to be 100% width and 100% height minus the 1em for the height of the fixed menu bar. Now I have all the elements, only problem the container size is 100% for width and height so the scrollbar shows up on the window because of that 1em bar at the top. I need the container with 9 responsive squares to fit in the window space.

Thank you.

[alpkank]

this is what I have now.
http://codepen.io/anon/pen/EJlDy

Red part is 9 divs floating in 3 rows with the height and width 33.333%

I would like to make it height 33.333% minus the pixel size of the top bar so that they fit in the rest of the window without showing scrollbar.
I tried
height: calc(33.333% – 20px);
but I cannot get it to work.

Thanks.

[Author]

Posts