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 the time. And the section part should take all available place between header and footer, but must have a min-height that is different according the page (I’ll set it manually on CSS).

When the min-height is reached, a scroll on the whole page should be available.

Here is the sample of code I’m using to set my header, section and footer taking all the available place.

CSS

body {
    margin: 0
}
header, section, footer {
    left:0;
    right:0;
    overflow: hidden;
    position: absolute;
}
header {
    height: 70px;
    top: 0;
    background-color: green;
}
section {
    top: 70px;
    bottom: 195px;
    background-color: gray;
    min-height:300px;
}
article {
    overflow: hidden;
    background-color:lightyellow;
}
.news {
    position: absolute;
    bottom: -30px;
    width: 100%;
    background-color: lime;
}
footer {
    height: 195px;
    bottom: 0;
    background-color: pink;
}

HTML

<header>
    <div class="container">
        <h2>My header</h2>
    </div>
</header> 
<section>
    <article>
        <div class="news">
            <div class="row-fluid">
                <a href="#">UP</a>
            </div>
            <div class="row-fluid">
                <div class="container">
                    <div class="span6">News 1</div>
                    <div class="span6">News 2</div>
                </div>
            </div>
        </div>
    </article>
</section> 
<footer>
    <div class="container">
    My footer
</div>
</footer>​

A jsfiddle is available for the example : http://jsfiddle.net/Nk6uY/

Edit

How I can add a min-height on my section that when it’s reached I get a scroll bar on my windows ?

Edit 2

I will add more informations about my problem. First, mostly of my content inside the section tag will be set in absolute. and hide somewhat and appear on actions (mostly javascript). For that reason, I know for each section which is the minimal height I need to see all my content if somebody click on the links.

For my example, the div news is hidden and when you click it will need at least 360px to be visible. But if my windows is smaller than this I don’t have scrolls on the windows and all my content is covered by the footer.

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;