Twitter Bootstrap Question posted in

Sticky Flexbox Footer isn't Working – Twitter bootstrap

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 - (613) 865-7733 &nbsp &nbsp
            Cornwall - (343) 885-7733 &nbsp &nbsp
            Kingston - (613) 817-7733 &nbsp &nbsp
            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>

I’ve tried using different variants, and all the same issue.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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">
        <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>
<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>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search