Sticky Flexbox Footer isn't Working - html

Question

I'm trying to make a sticker footer by flexbox; however, it's not working. It's still up about half of the screen.
Here's my HTML and CSS code:
.page {
flex: 1 0 auto;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
<div class="page">
<div class="contactandsocial">
<p class="phonenumbers">
Brockville - [phone] &nbsp &nbsp
Cornwall - [phone] &nbsp &nbsp
Kingston - [phone] &nbsp &nbsp
Ottawa - [phone]
</p>
<form action="http://www.truespeed.ca/contact">
<input type="submit" value="Contact" class="contact" />
</form>
<form action="#">
<input type="submit" value="My Account" class="myaccount" />
</form>
<form action="http://webmail.truespeed.ca/">
<input type="submit" value="Webmail" class="webmail" />
</form>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
<img alt="Brand" class="hidden-xs pull-left" style="margin-left: -6px; margin-top: -1px;" src="Images/TrueInternet.png" height="89px" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">Internet<span class="caret"></span>
<ul class="dropdown-menu">
<li>Cable</li>
<li>DSl</li>
<li>Wireless</li>
<li>Business Cable</li>
<li>Business DSL</li>
</ul>
</li>
<li class="dropdown">Phone<span class="caret"></span>
<ul class="dropdown-menu">
<li>Residential Phone</li>
<li>Business Phone</li>
<li>Transfers and Rates</li>
</ul>
</li>
<li>Android TV</li>
<li>Shaw Direct</li>
<li>Careers</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="trueSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#trueSlider" data-slide-to="0"></li>
<li data-target="#trueSlider" data-slide-to="1"></li>
<li data-target="#trueSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>Promotions!</h1>
</div>
</div>
<div class="item">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>News and Alerts!</h1>
</div>
</div>
<div class="item">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>Shaw Direct!</h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#trueSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#trueSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 footersocial">
<i class="hidden-xs fa fa-facebook-official fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-twitter fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-instagram fa-3x socialicons" aria-hidden="true"></i>
</div>
</div>
<div class="row footerlinks" style="margin-left: 15px; margin-top: 15px;">
<div class="col-xs-12 col-md-2 text-center">
<p>Privacy Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Terms of Service</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Acceptable Use Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Warranty & Returns Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Third Party Copyright Notices</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p style="text-align: center;">Terms of Service for Phone</p>
</div>
<div class="col-xs-12 col-md-12 text-center">
<p>Truespeed Internet Services Inc. 2014-2016, all rights reserved.</p>
</div>
</div>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/42e4157b18.js"></script>
</body>
I've tried using different variants, and all the same issue.

Answer 1

Place footer outside of .page and set .page to flex: 1 (Commented some footer links for better appreciation):
.page {
flex: 1;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer {
background: lightgray;
}
<div class="page">
Content
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 footersocial">
<i class="hidden-xs fa fa-facebook-official fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-twitter fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-instagram fa-3x socialicons" aria-hidden="true"></i>
</div>
</div>
<div class="row footerlinks" style="margin-left: 15px; margin-top: 15px;">
<!--<div class="col-xs-12 col-md-2 text-center">
<p>Privacy Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Terms of Service</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Acceptable Use Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Warranty & Returns Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Third Party Copyright Notices</p>
</div>-->
<div class="col-xs-12 col-md-2 text-center">
<p style="text-align: center;">Terms of Service for Phone</p>
</div>
<div class="col-xs-12 col-md-12 text-center">
<p>Truespeed Internet Services Inc. 2014-2016, all rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/42e4157b18.js"></script>

Answer 2

Since we don't have a minimal code snippet of yours, here is a sample code showing how it could be done.
html, body {
margin: 0;
}
body {
display: flex; /* IE 11/10 min-height bug fix - or an extra wrapper */
background: red;
} /* in the markup having display: flex; */
.page {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
background: lightgray;
flex: 1;
}
<div class="page">
<div class="header">
Header
</div>
<div class="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>
</div>
<div class="footer">
Footer
</div>
</div>

Answer 3

you can still do so
<main>
Main
</main>
<footer>
Footer
</footer>
html {
height: 100%;
}
body {
height: 100%;
}
main {
height: 100%;
padding-bottom: 200px;
background-color: #ccc;
}
footer {
height: 200px;
margin-top: -200px;
position: relative;
}
I do not advise use flexbox for all grid in page.