CSS: Sticky Footer With Full-height Content DIVs

I am trying to combine bootstrap sticky footer with full-height content DIVs. It appears that this question has been answered on the CSS Tricks site but the solution proposed by ju

Solution 1:

If you want the footer to scroll together with the page content, you can use flex divs:

body {
  height: 100vh;
  width:100%;
  margin:0px;
}

#container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height:100%;
}

#A {
  flex: 0 0 30px;
}

#B {
  flex: 1 1 auto;
}

#C {
  flex: 0 0 30px;
}

<div id="container">
  
<div id=A style="background-color:gold;">header</div>

<div id=B style="background-color:tomato;">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>

<div id=C style="background-color:gold;">footer</div>

</div>

Solution 2:

If you want your div extra content to scroll, you can do it like this:

body {
width: 100vw;
height: 100vh;
margin: 0px;
}

#content {
height: calc(100% - 30px);
background: gold; 
overflow-y: auto;
}

#footer {
height:30px;
background: tomato;  
}

<div id=content>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
</div>
<div id=footer>footer text.</div>

Solution 3:

Have you tried using the new CSS3 units of Viewport Height and Viewport Width?

Often times when I am using Dynamic content, that is... Dynamic by height, I run across these kinds of errors. I might suggest playing around with height: 100vh; or width: 100vw;and see if it helps.

I don't see your current code (only code from your old post in SO) so I can't provide a Heuristic or a better solution.