Set a min-height on content container

Question

I\'ve a case where I don\'t see the solution. Here is my problem :

I\'ve a page with three sections (header, section and footer) footer must flush to the bottom all

Answer 1

You can only achieve this through javascript - you would need to give your header, section and footer ids and then use something like this:

function ResizeBody() {
    var header = document.getElementById("Header");
    var section = document.getElementById("Section");
    var footer = document.getElementById("Footer");

    var height = GetBodyHeight() - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections;
    if (height > 0) {
         body.style.height = height + "px";
    }
}

function GetBodyHeight() {
    if (window.innerHeight > 0) {
        return window.innerHeight;
    }
    else {
        return document.documentElement.clientHeight;
    }
}

window.onresize = function () {
    ResizeBody();
};


$(document).ready(function () {
    ResizeBody();
});

UPDATE

Sorry, I think i read the question wrong - do you want the section to grow to the screen size or are you manually going to set it the if there is too much content have a scroll bar?

in which case you should just set the height (not as a min height) of the section and instead of overflow:hidden use overflow:scroll;