0
Ich versuche, einen Sticker Footer von flexbox zu machen; Es funktioniert jedoch nicht. Es ist immer noch etwa die Hälfte des Bildschirms.Sticky Flexbox Footer funktioniert nicht
Hier ist mein HTML und 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 - (613) 865-7733    
Cornwall - (343) 885-7733    
Kingston - (613) 817-7733    
Ottawa - (613) 454-7733
</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><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://www.truespeed.ca/wireless-internet">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>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 footersocial">
<a href="https://www.facebook.com/TrueSpeedInternetService/" 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="https://www.instagram.com/truespeedinternet/" 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>
</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>Ich habe versucht, verschiedene Varianten verwenden, und alle das gleiche Problem.
Blick auf Ihren Code haben Sie nichts mit den '
Ja, es ist Ihre 'Seite', die sollte' display: flex', nicht Körper, und es ist dein 'Container', der' flex: 1' verwenden sollte – LGSon
@Option Ich habe den CSS-Code hinzugefügt, den ich für notwendig hielt. Ich habe meine Footer-CSS-Regeln hinzugefügt. –