Bootstrap 3将页脚冲洗到底部不固定

简介: Bootstrap 3将页脚冲洗到底部不固定

如何解决Bootstrap 3将页脚冲洗到底部不固定?
请参见下面的示例。如果页面内容较少,这将使页脚定位在底部,如果页面内容较多,则页脚将像普通页脚一样。

  • {
    margin: 0;

}
html, body {

height: 100%;

}
.wrapper {

min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */

}
.footer, .push {

height: 155px; /* .push must be the same height as .footer */

}

Your website content here.

:新版本的Bootstrap演示了如何在不添加包装的情况下添加粘性页脚。有关更多详细信息,请参见Jboy Flaga的答案。

解决方法
我正在为正在设计的网站使用Bootstrap 3。

我想要一个像这样的样本页脚。

请注意,我不希望它已修复,因此引导程序navbar-fixed-bottom无法解决我的问题。我只是希望它始终位于内容的底部并且也要有所响应。

任何指南将不胜感激。

编辑:

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

这就是我现在所拥有的导航栏

SITEMAP

News

contact

FAQ

Privacy Policy

xxxx

yyyyyyyyyyyyy

xxxxx

uuuuuuuuuuuuuuu

的CSS

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

声明:地推任务网所有作品(图片、文字)均由用户自行上传分享,仅供网友学习交流。

相关文章
|
前端开发 容器
Bootstrap 粘页脚,你必须得学会的简单技能(1)
Bootstrap 粘页脚,你必须得学会的简单技能
108 0
Bootstrap 粘页脚,你必须得学会的简单技能(1)
|
前端开发 容器
Bootstrap 粘页脚,你必须得学会的简单技能(2)
Bootstrap 粘页脚,你必须得学会的简单技能
160 0
|
前端开发 容器
Bootstrap 粘页脚,你必须得学会的简单技能
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/50987126 Bootstrap 粘页脚(你必须得学会的简单技能),说得具体一点就是“将固定高度的页脚紧贴页面底部”。
1150 0
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
65 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
前端开发
|
前端开发 JavaScript 容器