1

I want to make a div fill the remaining space of the parent element.

html

<div id="mainWrapper">
        <div id="header">...
        </div>
        <div id="contentWrapper">
            <div id="content">
            </div>
        </div>

</div>

css

#mainWrapper
{
    width: 900px;
    height: 100vh;
    margin-left: auto;
    margin-right:auto;
    padding-top:100px
}
#header{
    height:456px;
}
#contentWrapper{
    background-color:black;
    padding: 30px;
    overflow: auto;
    height:100%;
}

The contentWrapper should fill all the remaining space below the header. Large content should be scrollable and not change contentWrappers height.

Is there a solution using pure css or do I have to use JS instead?

regards

user2224350
  • 2,262
  • 5
  • 28
  • 54
  • You're issue is probably the source of the most CSS questions asked. Please see http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best for a good explanation and possible solution. – musicfuel Dec 31 '14 at 17:24
  • first set height `100%` for `html, body` and then change the height of #mainWrapper to 100% and as you have added fixed height for header use `calc(100% - 456px)` for #contentWrapper – Vitorino fernandes Dec 31 '14 at 17:44
  • height:calc(100%-456px) makes contenWrapper 60px (2*padding) tall – user2224350 Dec 31 '14 at 18:14
  • This has been a really helpful article in the past for me: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – Chad Dec 31 '14 at 19:11

0 Answers0