html - Bootstrap 3 将页脚平齐到底部。不固定-6ren

html - Bootstrap 3 将页脚平齐到底部。不固定

转载作者：IT老高更新时间：2023-10-28 11:08:06

我正在为我正在设计的网站使用 Bootstrap 3。

我想要一个像这个示例一样的页脚。 Sample

请注意，我不希望它 FIXED，所以 bootstrap navbar-fixed-bottom 不能解决我的问题。我只是希望它始终位于内容的底部并且具有响应性。

任何指南都将不胜感激。

编辑:

对不起，如果我不清楚。现在发生的情况是，当内容主体没有足够的内容时。我的页脚向上移动，然后在底部留下一个空白区域。

这就是我现在的导航栏

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

最佳答案

这里有一个来自 bootstrap 的简化解决方案(您不需要创建新类):http://getbootstrap.com/examples/sticky-footer-navbar/

当您打开该页面时，右键单击浏览器并“查看源代码”并打开sticky-footer-navbar.css 文件(http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)

你可以看到你只需要这个CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

对于这个 HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

关于html - Bootstrap 3 将页脚平齐到底部。不固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21324395/

IT老高

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 3 将页脚平齐到底部。不固定