Height 100% and css issue with footer - html

Question

I am currently working on a script and in some pages there isn't enough content.In this case I want the page to cover 100% of the browser and put the footer at the bottom.I tried many codes and nothing seems to work I ended up by having a code like this:
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
and css like this :
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
Here is my jsfiddle : https://jsfiddle.net/k8k7o36b/
Any help will be appreciate. I'll be more than thankful if you add small explanation so I can understand what were I doing wrong.
Thanks

Answer 1

#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<footer id="footer">
Footer
</footer>
</div>
</div>
This should do it. I changed div to a footer and added some styling to the #footer id so that it has a position: absolute; and bottom: 0;. You can look into what position: absolute does here.
Edit: Obviously, you can adjust the height of the footer however you want, I just set it to 100px and background-color orange so that we can see it better.

Answer 2

You can try with flexbox:
Note you need to use 100% on html and body and also your footer element at the same level of nav and core
html,body {
margin: 0;
height: 100%;
}
.container {
background: orange;
min-height: 100%;
display: flex;
flex-direction: column;
}
#nav {
flex: 0 0 auto;
height: 55px;
}
#core {
flex: 1 0 auto;
background: red;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
</div>
<div id="footer">
Footer <br> footer
</div>
</div>

Answer 3

You can use a flex layout and set the main content area to flex-grow: 1 so it will consume all of the available space between your nav and footer, and that will push the footer to the bottom of the page when there isn't enough content.
body,
.container {
min-height: 100vh;
margin: 0;
}
.container,
#core {
display: flex;
flex-direction: column;
}
#core,
#content {
flex-grow: 1;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>

Answer 4

You can use calculations in css to help with this.
#core {
height: (100vh - 55px)
}
100vh is 100% of the viewport, while he 55px is the height of the footer. Add any other elements to the calculation if you give them a height also e.g.
#header{
height: 45px
}
#core {
height: (100vh - 100px)
}

Answer 5

html,body,#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
Add these classes
html,body{
height:100%
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}

Answer 6

Here is a generic flexbox solution.
flex-grow: 1; tells main to fill the remaining space. This also has the benefit of not having to set a specific height on your footer.
Flexbox Support
Chrome 21+
Firefox 28+
IE 10+
Edge
Safari 6.1+
*Some might support the 2012 syntax or require a prefix like -webkit-
html {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
header {
background-color: indianred;
}
main {
flex-grow: 1;
background-color: skyblue;
}
footer {
background-color: gold;
}
<header>
Header
</header>
<main>
Content
</main>
<footer>
Footer
</footer>