我通常熟悉使用CSS刷新页脚的技术.

但我很难让这种方法适用于Twitter bootstrap ,很可能是因为Twitter bootstrap 本质上是响应性的.使用Twitter bootstrap,我无法使用上述博文中描述的方法将页脚刷新到页面底部.

推荐答案

发现snippets here非常适合 bootstrap

HTML:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

Css相关问答推荐

如何在没有额外间隔的情况下使用Angular Metal chckbox?

Css-如何隐藏WP管理菜单上没有css类的第4<;li&>

Javascript Splitter Divider hover color css

如何定位此下拉框的下拉面板

可折叠/可展开的数据表行:如何使Shadcn数据表中的可折叠内容全宽?

如何使用DirectusImage标签作为背景?

Next.js 条件样式

这个 CSS :is() Select 器没有像我想象的那样工作

动态覆盖 Vuetify 类

弹性布局溢出时的换行符

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 如何为使用jsTreeR拖入层次 struct node 的元素添加顺序编号?

    如何断言 CSS 属性包含Cypress 测试中的一些文本?

    表格的边框半径没有按预期工作

    CSS类和id同名

    属性nowrap被认为是过时的.建议使用较新的构造.它是什么?

    加载资源失败:服务器响应状态为 404(未找到)

    下拉框中溢出文本的省略号

    如何使用 Bootstrap2 使 div 居中?

    为什么只为第一个元素显示双引号?