页脚不会粘在页面底部

时间：2016-04-16 15:57:42

标签： html css sticky-footer

我的页脚没有粘在页面底部。我已经尝试了以下内容：

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;
}

到目前为止，这些解决方案（在stackoverflow上找不到）都没有给我带来好处，所以我用自己的东西制作了一个代码：

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

如果您展开代码笔，以便看到比代码更多的结果，您将看到它仍然存在

NAVBAR

JUMBOTRON

CONTENT

FOOTER
<!--


Random white space


-->

我想要它做的是这样：

NAVBAR

JUMBOTRON

CONTENT









FOOTER

谢谢！

3 个答案:

答案 0 :(得分：1)

将.row放在div footer内，也许行级覆盖您的位置设置。

不

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

可是：

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

然后：

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

修改

所以你需要flexbox（或表格，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;
}

答案 1 :(得分：1)

我尝试了很多次，对我来说非常适合。

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

希望有所帮助：）

答案 2 :(得分：0)

问题是，如果你没有内容，你的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 */
}
相关问题
最新问题