fixed header div with scrollable div below

Question

I'm trying to place two divs one above the other. The top one has a fixed size. The bottom one needs to fill the rest of the page height, without making the page higher if it's content is too big.

<div id="content">
    <div id="top-padding"></div>
    <div id="stuff">
        some content
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
        End of content.
    </div>
</div><!-- content -->

My attempt so far is: http://jsfiddle.net/b4fEE/

The problem I have is that the green div is too big. I need as way to specify it's height as

100% - 30px

I'd prefer to do this in pure css, but I will resort to javascript/jquery if necessary.

@SteveP : #stuff { overflow-x:auto; background-color: lightgreen; } — ATR, Mar 08 '13 at 12:49
@SteveP : try my solution in your fiddle it self. It works. :-) — ATR, Mar 08 '13 at 12:51

Mr_Green · Accepted Answer · 2013-03-08T13:14:54.190

10

Try this:

#stuff {
   overflow-x:auto;
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */
   left:0;
   right:0;
   bottom:0;
   position:absolute;
}

Working Fiddle

edited Mar 08 '13 at 13:14

answered Mar 08 '13 at 12:34

Mr_Green

40,727
45
159
271

The
tags where simply a way to make the content bigger than the available space to force a scrollbar to appear. – SteveP Mar 08 '13 at 12:50
Thanks for your css suggestion. It works perfectly for me, thanks. – SteveP Mar 08 '13 at 12:51

score 7 · Answer 2 · answered Apr 19 '16 at 12:25

In case if anyone wants to solve this keeping things in normal flow, nowadays this can be done using the flexbox layout model as shown below:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#content {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
  margin: 0 auto;
  background-color: #C9E6FF;
}
#top-padding {
  height: 30px;
  flex: none;
  background: blue;
}
#stuff {
  flex: auto;
  overflow-y: auto;
  background-color: lightgreen;
}
/*for demo purpose */

#stuff p {
  height: 1000px;
}

<div id="content">
  <div id="top-padding"></div>
  <div id="stuff">
    <p>some content</p>
  </div>
</div>

score 1 · Answer 3 · answered Apr 19 '16 at 12:44

And in case if anyone wants to solve this keeping things in normal flow and without using flex, then solution is as follows:

html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    #content {
        height: 100vh;
        position: relative;
        background-color: #C9E6FF;
        margin: 0 auto;
        width: 300px;
    }

    #top-padding {
        background: blue;
        height: 30px;
    }

    #stuff {
        overflow-x:auto;
        background-color: lightgreen;
        height: calc(100vh - 30px);
    }

<div id="content">
    <div id="top-padding"></div>
        <div id="stuff">
            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
       </div>
   </div>

fixed header div with scrollable div below

3 Answers3

Linked