The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Combine responsive and semi responsive

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #165084

    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.


    this is what I have now.

    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.


Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.