I'm creating a website and I'm having some issues. I'm using my boss' 4k monitor to test if the my sticky footer is all the way at the bottom. And it's not. The weird thing is that the footer never changes how far down it is even if I change min-height: 100vh; to something higher.
Here's my HTML:
<body>
<div class="page">
<div class="contactandsocial">
<p class="phonenumbers">
Brockville - (613) 865-7733    
Cornwall - (343) 885-7733    
Kingston - (613) 817-7733    
Ottawa - (613) 454-7733
</p>
<form action="http://ift.tt/2iEp7Kg">
<input type="submit" value="Contact" class="contact" />
</form>
<form action="#">
<input type="submit" value="My Account" class="myaccount" />
</form>
<form action="http://ift.tt/2j0zGUm">
<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><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Cable</a></li>
<li><a href="#">DSl</a></li>
<li><a href="http://ift.tt/2iEy8mv">Wireless</a></li>
<li><a href="#">Business Cable</a></li>
<li><a href="#">Business DSL</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Phone<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Residential Phone</a></li>
<li><a href="#">Business Phone</a></li>
<li><a href="#">Transfers and Rates</a></li>
</ul>
</li>
<li><a href="#">Android TV</a></li>
<li><a href="#">Shaw Direct</a></li>
<li><a href="#">Careers</a></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>
<div class="page-content">
<p>Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.</p>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 footersocial">
<a href="http://ift.tt/2j0xk7V" target="_blank"><i class="hidden-xs fa fa-facebook-official fa-3x socialicons" aria-hidden="true"></i></a>
<a href="https://twitter.com/truespeedcanada" target="_blank"><i class="hidden-xs fa fa-twitter fa-3x socialicons" aria-hidden="true"></i></a>
<a href="http://ift.tt/2iEykCh" target="_blank"><i class="hidden-xs fa fa-instagram fa-3x socialicons" aria-hidden="true"></i></a>
</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="http://ift.tt/1XwG72U"></script>
<script src="http://ift.tt/2aHTozy" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://ift.tt/2j0DW6v"></script>
</body>
And my CSS:
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
}
.page-content {
flex: 1;
width: auto;
}
html, body {
height: 100%;
width: auto;
}
footer {
background-color: #00AEFE;
height: auto;
}
footer p {
color: white;
}
Aucun commentaire:
Enregistrer un commentaire