技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

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

来源: 技术CTO 阅读:

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


<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.. 希望大牛们能详细说明一下.. 或者给我一个地址我去看, 一直没有搜到怎么解决这种问题的...
<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>
引用 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 会一直停靠在窗口下面, 当窗口缩小的时候 会挡住上面的内容... 能有一直停在网页最下面的方法么... 不停靠在窗口下...
引用 2 楼 xmt1139057136 的回复:

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

看这个,我没时间研究这个,等我有时间了写个demo!!
引用 5 楼 xmt1139057136 的回复:

看这个,我没时间研究这个,等我有时间了写个demo!!

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

早点回家休息!!

多积累积累!!!!
引用 9 楼 xmt1139057136 的回复:
你发的这些我都看过了.... 还是没搞定..是我太2了么........ 
求明天深入交流....
引用 9 楼 xmt1139057136 的回复:

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

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^