HTML, CSS, Sticky Header and Footer, Minimum Height Content DIV

I have reviewed a number of posts and have not found exactly what I am looking for. Perhaps I might have missed something. If so, my apologies. I have a sticky header and footer and would like my content DIV to observe a minimum height of 100%. In this case the DIV requiring a minimum height has an ID of "minHeightContainer". I have commented out a number of paragraphs within the DIV that when un-commented illustrate the desired vertical scroll behavior. However, when commented out I would like the DIV to observe a minimum height of 100% due to different background colors on my various elements. My HTML and CSS is shown below. Any assistance would be greatly appreciated.

<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">
@font-face
{
    font-family:Segoe UI;
}

@font-face
{
    font-family:Segoe UI Semibold;
}

@font-face
{
    font-family:Segoe UI Light;
}

body
{
    background:#fff;
    border:0px;
    color:#323232;
    font-family:"Segoe UI";
    font-size:12px;
    height:100%;
    margin:0px;
    max-height:100%;
    overflow-y:scroll;
}

.background
{
    background-color:#eee;
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:-1;
}

.container
{
    margin:0px auto 0px auto;
    min-height:100% !important;
    width:1190px;
}

.container-front
{
    background-color:#fff;
    padding:35px 5px 50px 5px;
}

.header-footer
{
    background-color:#455a72;
}

.navbar
{
    min-height:30px;
    position:relative;
    z-index:1000;
}

.navbar-fixed-top
{
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:1030;
}

.navbar-header
{
    background:url('Images/Header.png') no-repeat right 0px;
}

.shadow
{
    -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
}

.toolbar
{
    min-height:45px;
    position:relative;
    z-index:1000;
}

.toolbar-fixed-bottom
{
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    z-index:1030;
}
</style>

</head>

<body>
    <form>
        <div class="background">
        </div>
        <div class="header-footer navbar navbar-fixed-top">
            <div class="container navbar-header">
                HEADER
            </div>
        </div>
        <div class="container container-front shadow" id="minHeightContainer">
		<p>Start</p>


<!-- UNCOMMENT TO OBSERVE VERTICAL SCROLL

<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
-->


<p>End</p>
        </div>
        <div class="header-footer toolbar toolbar-fixed-bottom">
            <div class="container">
                FOOTER
            </div>
        </div>
    </form>
</body>
</html>

Solution

You need to add two more lines of CSS:

To make the % height works use this:

html,form {height:100%}

And to avoid the padding increase the height of container use this

.container-front { box-sizing:border-box; }

Check the Snippet Below

<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">
@font-face
{
    font-family:Segoe UI;
}

@font-face
{
    font-family:Segoe UI Semibold;
}

@font-face
{
    font-family:Segoe UI Light;
}
html,form {height:100%}
body
{
    background:#fff;
    border:0px;
    color:#323232;
    font-family:"Segoe UI";
    font-size:12px;
    height:100%;
    margin:0px;
    max-height:100%;
    overflow-y:scroll;
}

.background
{
    background-color:#eee;
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:-1;
}

.container
{
    margin:0px auto 0px auto;
    min-height:100% !important;
    width:1190px;
}

.container-front
{
    box-sizing:border-box;
    background-color:#fff;
    padding:35px 5px 50px 5px;
}

.header-footer
{
    background-color:#455a72;
}

.navbar
{
    min-height:30px;
    position:relative;
    z-index:1000;
}

.navbar-fixed-top
{
    left:0px;
    position:fixed;
    right:0px;
    top:0px;
    z-index:1030;
}

.navbar-header
{
    background:url('Images/Header.png') no-repeat right 0px;
}

.shadow
{
    -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
    box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);
}

.toolbar
{
    min-height:45px;
    position:relative;
    z-index:1000;
}

.toolbar-fixed-bottom
{
    bottom:0px;
    left:0px;
    position:fixed;
    right:0px;
    z-index:1030;
}
</style>

</head>

<body>
    <form>
        <div class="background">
        </div>
        <div class="header-footer navbar navbar-fixed-top">
            <div class="container navbar-header">
                HEADER
            </div>
        </div>
        <div class="container container-front shadow" id="minHeightContainer">
		<p>Start</p>


<!-- UNCOMMENT TO OBSERVE VERTICAL SCROLL

<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
<p>Here is some text.</p>
-->


<p>End</p>
        </div>
        <div class="header-footer toolbar toolbar-fixed-bottom">
            <div class="container">
                FOOTER
            </div>
        </div>
    </form>
</body>
</html>