html - 粘性 Flexbox 页脚不起作用

Question

我正在尝试通过 flexbox 制作贴纸页脚；但是，它不起作用。它仍然占屏幕的一半左右。

这是我的 HTML 和 CSS 代码:

.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>

我试过使用不同的变体，但都是同样的问题。

Answer 1

将 footer 放在 .page 之外，并将 .page 设置为 flex: 1 (注释了一些页脚链接为了更好地欣赏):

.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>