Div height 100% makes page to have scroll

Question

I have following structure:

<header></header>
<nav></nav>
<section id="mainContainer">
<section id="innerContainer">
</section>
</section>
<footer></footer>

And following css:

html {
    height: 100% !important;
}

body {
    height: 100% !important;
}

body header {
    min-width: 1280px;
    height: 78px;
}

body nav {
    height: 41px;
}

body section#mainContainer {
    height: 100%;
}

body section div#innerContainer {
    height: 100%;
}

body footer {
    height: 48px;
}

The main goal is - to make sticky footer. But css config like this only makes scroll appear on my page. Ive already tryed all possible variations of making sticky footers, but all of them gave me the same result. What Im doing wrong.

Answer 1

You are getting scroll because of these

body section#mainContainer {
    height: 100%;
}

body section div#innerContainer {
    height: 100%;
}

And you are adding a header, nav and footer which causes page to increase height i.e 100% + 78px + 41px+ 48px;

If you need a sticky footer than go for ryan fait's sticky footer