I've been struggling to make the .footer and the div .content have a height of 100%. While I know how to get the footer to stick at the bottom, I can't seem to make the content div reach the bottom of the page. Increasing the min-height on the content div isn't solving the issue.
You can check out my site here
This is what I'm aiming for but finding it difficult to align the center page and footer to the bottom of the page.
See the image here
CODE
<body>
<div class="header">
</div>
<div class="content">
<div class="page-content">
<div class="column_4"></div>
<div class="column_5"></div>
<div class="column_6"></div>
<div class="column_7"></div>
</div>
</div>
<div class="footer">
</div>
<div style="display:none">
</div>
</body>
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
margin:0;
font-size: 15px;
font-weight: 400;
line-height: 157%;
color: #666666;
padding:0;
}
.content {
min-height: 0;
.header {
min-height:300px;
background-color:#000000;
}
.footer {
min-height:300px;
background-color:#000000;
}
background-color:#9E959E;
}
After implementing your suggestions, this is what I currently have:
html,body {
height:100%;
}
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
margin:0;
font-size: 15px;
font-weight: 400;
line-height: 157%;
color: #666666;
padding:0;
}
.content {
min-height: 0;
background-color: #9E959E;
height: calc(100% - 50px); /* add this */
}
.footer {
min-height: 25px;
margin-left: auto;
margin-right: auto;
background-color:#000000;
clear: both;
position:fixed;
right:0px;
left:0px;
bottom:0px;
}
.header {
min-height:300px;
background-color:#000000;
}
@media only screen and (min-width : 768px) {
.header {
min-height: 25px;
}
}
@media only screen and (min-width : 992px) {
.header {
min-height: 25px;
}
}
<body>
<div class="header">
</div>
<div class="content">
<div class="page-content">
<div class="column_4"></div>
<div class="column_5"></div>
<div class="column_6"></div>
<div class="column_7"></div>
</div>
</div>
<div class="footer">
</div>
<div style="display:none">
</div>
</body>