Make inner div to fit both page size and content - css

Question

I have three divs in page called header, content and footer. Header is showing at top and have no issue.
The following css is not working properly with inner div (Content) to fit its content and screen display.
While I want to
expand inner div to fill screen size and footer remain at bottom.
Keep divs in order
fill content always
I have tried many css solutions but nothing works perfect to fit div at page and content both.
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
Please note its wordpress theme and woocommerce pages need to show inside inner div

Answer 1

check this jfiddle and tell me if it works as you wanted thank you.
body{
margin:0px;
}
.header{
background-color:#bf4b4b;
height:80px;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
height:100vh;
padding:80px 0px;
background-color:#FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.footer{
background-color:#243b82;
height:80px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}

Answer 2

Flex display could be a great option here. It looks like you started down that path already. Adding a surrounding container with a min-height of the full window, "100vh", might accomplish what you're looking for. Let me know how this works out:
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
.container {
display: flex;
width: 100%;
min-height: 100vh;
flex-direction: column;
}
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
http://codepen.io/amishstripclub/pen/gwNGXw?editors=1100

Answer 3

I have solved using overflow property and sticky footer as below:
.header {
background-color: #bf4b4b ;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
position: fixed;
right: 0;
left: 0;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5%;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
overflow:auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer {
background-color: #243b82 ;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
}