用Bootstrap怎么设置页脚一直在最下面呢?

糖几颗的 2014-10-23 03:26:45

新手,初学. 希望能得到大家的帮助..
目前我写的网页结构是这样的:



<body>

<!-- 导航 -->

<div class="navbar">

</div>

<!-- 图片轮播 -->

<div class="carousel">

</div>

<!-- 内容展示 container 里面分两个 6 -->

<div class="container">

     <div class="col-md-6"></div>

     <div class="col-md-6"></div>

</div>

<!-- 页脚  -->

<div class="footer">

</div>

</body>

我想达到的最终效果是:
希望页脚能一直在上面的那个container的下边, 并且页脚是这个页面的结尾了, 但我现在遇到的问题是.. 我调整了上面的container的大小之后, 页脚会被提高或者降低...导致我写的页脚下面还有空白的地方...
因为有的屏幕是大屏肯定就一屏显示完了, 有的是小屏一屏显示不完, 希望达到的效果, 就是一直在页面的结尾, 并不需要跟随窗口的最下面(如果内容不到一屏那就是在最下面).
本人初学web.. 希望大牛们能详细说明一下.. 或者给我一个地址我去看, 一直没有搜到怎么解决这种问题的...

...全文

33030 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

小垃圾哈哈 2016-04-19

打赏
举报

var aa=function(){
      if($(window).height()==$(document).height()){
        $(".copyright").addClass("navbar-fixed-bottom");
      }
      else{
        $(".copyright").removeClass(" navbar-fixed-bottom");
      }
    }

如果用bootstrap做的话可以试试添加这个

conanju_pc 2016-03-21

打赏
举报

请问你的问题解决没有呢？我也遇到这个问题了。。。谢谢求解啊

xusiman 2015-12-17

打赏
举报

这个问题也困恼我很久，最后看了一篇文章直接加 .container <footer class="bottom"> <div class="container"> ...你的内容 </div> </footer>

李家老三 2015-11-18

打赏
举报

内容不足加这个navbar-fixed-bottom，内容能撑开就去掉这个类

原点丹枫 2014-10-29

打赏
举报

position：f ix属性试试

糖几颗的 2014-10-24

打赏
举报

引用 12 楼 xmt1139057136 的回复:

网上多搜索搜索，多问问你同事。祝你好运！！！

我要有同事问..就不来这里问了.....

看来你好忙...

业余草 2014-10-24

打赏
举报

网上多搜索搜索，多问问你同事。祝你好运！！！

糖几颗的 2014-10-23

打赏
举报

引用 9 楼 xmt1139057136 的回复:

http://blog.sina.com.cn/s/blog_7f95e24b01016vc7.html

今天最后一问... 我还是想通过这种方式来实现: 整个网页是只有一个container. 然后设置 html,body {height : 100%;} 然后设置container {height:100%;} , 这样container就填充了整个页面了那么问题就来了.. 1. 我把东西都放在container里面之后, 两边都多了15px的空白... 怎么破.. 2. footer怎么停靠在container的最下面呢.. 我读书少...之前一直在写网游的服务器端.. 现在是这周刚学web , 想自己做个工作室的网站.. 求大神救我...

糖几颗的 2014-10-23

打赏
举报

引用 9 楼 xmt1139057136 的回复:

http://blog.sina.com.cn/s/blog_7f95e24b01016vc7.html

你发的这些我都看过了.... 还是没搞定..是我太2了么........ 求明天深入交流....

业余草 2014-10-23

打赏
举报

http://blog.sina.com.cn/s/blog_7f95e24b01016vc7.html

业余草 2014-10-23

打赏
举报

http://blog.csdn.net/lyc_2011_acm/article/details/8685446 多积累积累！！！！

业余草 2014-10-23

打赏
举报

http://www.cnblogs.com/leohxj/archive/2012/07/25/2608005.html 早点回家休息！！

糖几颗的 2014-10-23

打赏
举报

引用 5 楼 xmt1139057136 的回复:

http://blog.csdn.net/zajin/article/details/8614230 看这个，我没时间研究这个，等我有时间了写个demo！！

谢谢大神了... 这个里面举得例子. 就是把页脚 "固定在底部,将固定高度的页脚钉在页面可视区域的最下方" 在页面缩小的时候, 还是会遮挡住别的内容... 我现在想了一个解决方案, 你看看怎么样.. 就是让footer上面的那个container 里最下面开一个row, 让这个row填充当前页面下面的所有空挡.. 然后给这个container设置一个margin-bottom 把页脚的位置空出来.. 这样就可以一直把页脚抵在最下面了...并且适应不同窗口.... 但是问题就变成..怎么去填充当前窗口下的所有空白的地方呢... 这个问题好不好解决呢.. 求教..

业余草 2014-10-23

打赏
举报

http://blog.csdn.net/zajin/article/details/8614230 看这个，我没时间研究这个，等我有时间了写个demo！！

糖几颗的 2014-10-23

打赏
举报

引用 2 楼 xmt1139057136 的回复:

http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page

这个文章我也看了.... 但是我怎么都调整不来..........痛苦.. 而且这个是11年的了.. 现在流行的Bootstrap..有没有什么方式呢..

糖几颗的 2014-10-23

打赏
举报

引用 1 楼 xmt1139057136 的回复:

<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-inner navbar-content-center">
        <p class="text-muted credit" style="padding: 10px;">
            ....
        </p>
    </div>
</nav>

这种的话... 是用导航栏实现的... 但这个 navbar-fixed-bootom 会一直停靠在窗口下面, 当窗口缩小的时候会挡住上面的内容... 能有一直停在网页最下面的方法么... 不停靠在窗口下...

业余草 2014-10-23

打赏
举报

http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page

业余草 2014-10-23

打赏
举报

<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-inner navbar-content-center">
        <p class="text-muted credit" style="padding: 10px;">
            ....
        </p>
    </div>
</nav>