Full Page design: How to force a Div to stop expanding at the bottom of the page

Question

I'm sorry if the title is a bit confusing but I wasn't sure how to describe my problem in a single sentence. So basically I've been struggling since a few days on a Full Page/Screen design.

In my design I've multiple Div that contain some text and one of them is a lot bigger that the height of a normal screen resolution. Moreover I don't want the website to have scrolls on the side of the viewer's browser and I rather have a scroll in the Div that is too big (such as using overflow: auto; in this div). However I can't seem to be able to get at the same time the right positioning of the div and the scroll.

Here is a CodePen of my situation, I want the red and blue Div to be positioned like that but I would also want the blue div to stop expanding when it reaches the bottom of the page and to have a scroll if it does happen.

The only way I've found to get a scroll would be by using max-height or absolute positioning. However none of these solutions are viable since the max-height of the blue div is different for every screen resolutions and the height of the red div isn't fixed. Also if I try to use absolute positioning I end up with the blue div standing above the red div since the absolute positioning of the blue div makes it leave "the flow" (and I can't use margin-top: "height of the red div"; to solve this problem because the height of the red div isn't fixed).

Hopefully my explanation was clear and somebody will be able to help me. By the way I rather not use JS but if it's necessary I'll use it. Additionally I would welcome a solution that doesn't on old version of IE since none of my viewers are using them.

Thanks, Thomas A

EDIT: Just to be clearer I want it to look like that but with the height of the blue div (#bottom-inside-container) being dynamic and not fixed (going from the start of the div to the bottom of the page whatever the size of the page)

Answer 1

3 years later with the better browsers' support is easy with flexbox property. You could have added the following to your CSS:

#wrapper {
    display:flex; 
    flex-direction:column;
}
#top-inside-container {
    flex-grow:2;
}
#bottom-inside-container {
    flex-grow:1;
    overflow-x: hidden;
    overflow-y: auto;
}

Setting flex-grow:2 in the top inside container, which is small, is what makes it grow until it shows all it's content. Setting overflows on the bottom inside container will hide (for horizontal scrolling) and set (for vertical scrolling) the scrollbars depending on how much content it has to show.

Here is a code based on your codepen with minimal modifications:

http://codepen.io/anon/pen/BLKENA

PD: I came from Google searching for a similar answer... it could help somebody anyway.

Answer 2

Your wrapper does not scroll because it has no height (or 100%). Then, the default browser scrolling is applied, but you can't scroll at your wrapper level.

Scrolling works by simply giving a height to your wrapper - Ex:

#wrapper { 
  position:fixed;
  right:550px;
  left:0;
  background:rgb(200,200,200);
  height: 500px;
  overflow: auto;
}

Hope this will help