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

Home Forums CSS flexible height element

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

    Hello folks;
    I wonder if you can point me in the right direction here. I’m interested in making an element the full remaining height of the viewable screen below a header image (without bringing up a scrollbar. If the header was a fixed height, I could use calc(). However the image is dynamic to the screen size. This means that the height isn’t set. Can I use calc with a div name? Or is there something else that will work?
    (if this description isn’t sufficient, let me know and I’ll throw something on codepen)


    A Codepen would be good but frankly if the header height is dynamic…I’d use Javascript.

    It’s not hard with Jquery.


    Thanks a lot Paulie. I want to emphasize that ‘not hard’ is a relative term. I’m still learning css, and have only the most rudimentary skills in javascript (or any type of caffeinated code for that matter).
    But here’s a codepen for the look I’m going for


    If you’re using viewport units, there’s be no need for calc(). You can set them directly, just make sure the elements together make 100vh :

    An example

    And use box-sizing: border-box on all elements…
    It’s easier to use a percentage for width by the way (also for height if the parent is body/window) – vw and vh don’t account for scrollbars. Less of an issue if there aren’t any of course.

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