Question

One page website.
Header at the top with anchor links
To different divs (sections) on the page.

Say my screen resolution is 1280*800 and each div section is max 800 and the content on each div section is visible when my browser is maximum size. I forgot to mention that scrolling is disabled so the other divs are only visible (scrolled automatically) using the anchor links at the top. So heres the problem, when I resize my browser, say for example theres only 450px worth of height on my browser, I can only see that amount of content on the screen and cannot scroll until the bottom of the div, so it hits the bottom of my browser.

Another point to understand is that all the elements in the div itself are not overflowing the height of the div so a simple overflow does not work because the issue is to do with the size of the browsers’ height.

In essence when the browser window is anything less than 800px, the div is then covered up at the bottom by the amount reduced by the browser. I want the whole div (NOT THE CONTENT INSIDE IT) to be pushed up (top position) as far as it needs to so that the bottom of the div i.e. 800th pixel touches the bottom of the browser.

Any solution?

Answer 1

You can listen to changes in the window size and adjust the size of your divs to it. This way the div will always have the size of the window, so if it gets too small its overflow will show.

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

Working example at jsFiddle. Remember to set the div’s overflow to auto, so they will show when the screen gets too small.

Update: from what I could understand in your update, your requirements can be satisfied with simple CSS. Let the html, body overflow at will, but set the “container” div‘s overflow to hidden (so it will only scroll one page at a time) and its height to 800px. When the browser window is resized to less than 800 px, the body’s scroll bars will appear, letting you scroll the container div up and down. Both the container and the contentes will remain the same size: 800px.

html,body {
    overflow: auto;
}

.container, .contents {
    height: 800px;
    overflow: hidden;
}

Working example at jsFiddle. Is that what you need? If you literally want to push the container div up until its bottom is aligned to the window, try setting padding-top or margin-top instead of top (though in this case I don’t know how the scrolling will work).