页脚不粘在页面底部

Question

我的页脚没有贴在页面底部。我已经尝试过以下方法：

footer { /* position must be absolute and bottom must be 0 */
    height: 100px;
    width: 100%;
    background: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
}

footer {
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #00A;
    z-index: 150;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
}

None 这些解决方案（在 Whosebug 上找到）到目前为止对我有用，所以我用我所拥有的做了一个代码笔：

http://codepen.io/sredmond/pen/revjdv

如果您展开代码笔，看到的结果多于代码，您会看到它保持不变

NAVBAR

JUMBOTRON

CONTENT

FOOTER
<!--


Random white space


-->

我想要它做的是这样的：

NAVBAR

JUMBOTRON

CONTENT









FOOTER

谢谢！

Answer 1

问题是，如果您没有内容，您的 html 和正文标签不会扩展到屏幕底部。要使您的 html 扩展到底部，请添加此 css:

html,
body {
   margin:0; /* removes any margin (especially at the bottom) */
   padding:0; /* removes any padding (especially at the bottom) */
   height:100%; /* will make it expand to the end */
}

Answer 2

将你的 .row 放在 div 里面 footer，也许 class 行会覆盖你的位置设置。

不是：

<footer class="row"></footer>

但是：

<footer><div class="row"></div></footer>

然后：

footer { 
    position: fixed; 
    left: 0; bottom: 0; right: 0; 
}

编辑

所以你需要 flexbox（或 tables，flexbox 更简单但向后兼容性较差）：

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Project</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Portfolio">Portfolio</a></li>

                    <li><a href="/Home/Contact">Contact</a></li>

                    <li><a href="/Home/Terms">Terms Of Service</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
                    <li>
                        <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
                    </li>
                    <li>
                        <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
                    </li>
                    <li>
                        <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center">
                    <li class="social-icons">
                        <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
                        <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
                        <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
                    </li>
                </ul>

</div>
        </div>
    </div>

    <div class="container body-content">

        <div class="content-wrapper">
      <div class="content-body">

        <div class="jumbotron">
            <h1 class="text-center">Portfolio</h1>
        </div>

        <div class="row">
            <div class="col-xs-12 col-md-4 text-center bottom-30">
                <h4 class="bold">PeppNation</h4>
                <a href="http://www.peppnation.techuhost.com" target="_blank">
                    <img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/>
                </a>
            </div>

            <div class="col-xs-12 col-md-4 text-center bottom-30">
                <h4 class="bold">Brock Report - Publications Page</h4>
                <a href="http://brockreport.com/publications.aspx" target="_blank">
                    <img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/>
                </a>
            </div>

            <div class="col-xs-12 col-md-4 text-center bottom-30">
                <h4 class="bold">Camp BASIC</h4>
                <a href="http://campbasicdev.dev2.nsrit.com/" target="_blank">
                    <img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/>
                </a>
            </div>
        </div>

      </div>

      <footer class="content-footer">
              <div class="row text-center">
                <div class="col-xs-12 col-md-2">
                    <h4 class="bold">TechU</h4>
                    <p><a href="/Home/Terms">Terms Of Service</a></p>
                    <p>&copy; 2016 - TechU</p>
                </div>

                <div class="col-xs-12 col-md-3">
                    <h4 class="bold">Contact Information</h4>
                    <p>Phone: <strong><a href="tel:4142555423">(414) 255-5423</a></strong></p>
                    <p>Email: <strong><a href="mailto:samjredmond@yahoo.com">samjredmond@yahoo.com</a></strong></p>
                </div>

                <div class="col-xs-12 col-md-3">
                    <h4 class="bold">Business Hours</h4>
                    <p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p>
                    <p>Saturday & Sunday: <strong>Closed</strong></p>
                </div>

                <div class="col-xs-12 col-md-4">
                    <ul class="nav navbar-nav hidden-xs footer-social-button-align">
                        <li>
                            <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
                        </li>
                        <li>
                            <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
                        </li>
                        <li>
                            <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav hidden-md hidden-lg hidden-sm">
                        <li class="social-icons">
                            <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
                            <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
                            <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
                        </li>
                    </ul>
                </div>
              </div>
      </footer>

    </div>

    </div>
</body>

&CSS

html, body {
    height: 100%;
    padding-top: 0;
    background-color: #cccccc;
}

.body-content {
    height: 100%;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%
}

.content-body {
    flex: 1 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 50px;
}

.content-footer {
    flex: 0 0 auto;
}

Answer 3

这个我试了很多次，对我来说效果很好。

https://css-tricks.com/snippets/css/sticky-footer/

希望对您有所帮助:)

页脚不粘在页面底部

Footer Not Sticking To The Bottom Of The Page

html

css

sticky-footer