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

[TaSki]

Hi,

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 like in this CodePen 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 (CodePen) 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)

[wolfcry911]

How about a [bit of jQuery](http://codepen.io/wolfcry911/pen/ugfLB “”)?
I’m sure someone can improve upon it and I realize you’d rather not use it, but it works.

[TaSki]

Hi @wolfcry911 thanks a lot for your answer. I think that the use of some jQuery is inevitable. Your jQuery works great expect for the fact that it doesn’t change “top” when the viewer re-size its browser window horizontally.

In the mean time I also had some help from someone else who also thought that jQuery had to be used and he ended with these JS lines that work with horizontal and vertical resizing of the browser window:

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

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

Here is the end result.

Thanks again and unless a solution without jQuery exists this problem is solved :).

[Author]

Posts