当前位置: 首页 > 面试题库 >

将页脚冲洗至页面底部,Twitter引导程序

李浩邈
2023-03-14
问题内容

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

但是我很难在Twitter引导程序中使用这种方法,这很可能是由于Twitter引导程序本质上是响应式的。使用Twitter引导程序,我无法使用上述博客文章中描述的方法使页脚刷新至页面底部。


问题答案:

发现这里的代码片段非常适合引导

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;
}


 类似资料:
  • 这是我的HTML: 这是我的CSS,仅用于页脚:

  • 问题内容: 我正在为正在设计的网站使用Bootstrap 3。 我想要一个像这样的样本页脚。 请注意,我不希望它已修复,因此引导程序navbar-fixed-bottom无法解决我的问题。我只是希望它始终位于内容的底部并且也要有所响应。 任何指南将不胜感激。 编辑: 对不起,如果我不清楚。现在发生的是,内容主体没有足够的内容时。我的页脚向上移动,然后在底部留下一个空白区域。 这就是我现在所拥有的导

  • 我知道这个问题可能被问了几百次,但遗憾的是,我在这里找到的答案并没有真正帮助我。 例如,我尝试了以下答案: 引导页脚不在底部 但是我仍然有一个问题,当我的页面内容“小”并且没有填满正文/页面容器的整个高度时,页脚只是漂浮在浏览器窗口末端的某个地方。 以下是我的页脚代码: 我正在使用Bootstrap 4.1和Chrome,我的网站上还有一个代码笔: https://codepen.io/anon/

  • 问题内容: 有什么方法可以牢记jQuery Mobile框架的操作方式来修复页面,以便页脚始终与页面底部对齐-不管高度如何。 按照目前的情况,jQuery页面的高度将发生变化,尤其是当设备从纵向旋转为横向时,因此解决方案必须考虑到这一点。 只是为了澄清-我不需要页脚位于视口的底部,而只是为了使默认页面高度不低于视口高度而工作。 谢谢。 问题答案: 您可以在CSS文件中添加此代码: 因此,页面数据角

  • 问题内容: 任何人都可以解释如何将页脚div与页面底部对齐。从我所看到的示例中,它们都显示了如何使div保持在底部可见,无论您将页面滚动到何处。虽然我不想要那样。我希望它固定在页面的底部,所以它不会移动。感谢帮助! 问题答案: 更新 我的原始答案来自很久以前,并且链接已断开;更新它,使其继续有用。 我包括内联的更新解决方案,以及JSFiddle上的工作示例。注意:尽管没有内联那些样式,但我依赖CS