Thomas A Thomas A - 2 months ago 9
CSS Question

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

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

You say about your second failed option (using absolute positioning on blue div) that it couldn't be done cause it left the normal flow. Well, I made that blue div be absolute while not leaving the normal flow, by enclosing both red and blue divs in relative parents, see http://codepen.io/anon/pen/KEdwG

But then, it still fails.. the reason is, what height do you set your now absolute blue div to? You can't give an answer, nor I, but the "overflow:scroll" needs to know at what height to start scrolling. That is the reason why this can't be done solely with CSS.

So if you don't mind adding two lines of jquery to your document.ready() , see my pen about solving it that way, you can ignore the window.resize() code for your page, as I putted it in the pen so you can drag the iframe vertically and see how the blue div keeps maintaining the expected height.

Also, if you look at css comments of my pen, I change your left:25px to be 4% as it's needed for the relative parents to get it right (besides it's better to use % than px in general).

I paste here the pen jquery code just for convenience:

$(document).ready(function() {
  max = $(document).height() - $('#bottom-inside-container').offset().top;
  $('#bottom-inside-container').css('max-height',max);
});
Comments