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

将页脚的底部高度保持可变[重复]

汪建白
2023-03-14
问题内容

我需要保持页脚在底部,但其高度可变,因此主要解决方案不适合我…

任何人都可以使用灵活的页脚解决方案?


问题答案:

:解决此布局问题的现代方法是使用flexboxCSS模型。所有主流浏览器和IE11
+均支持该功能。

这是使用div带有的s 的灵活高度的粘性页脚的解决方案display: table-row

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  display: table;

  height: 100%;

  width: 100%;

  background: yellow;

}

.content {

  display: table-row;

  /* height is dynamic, and will expand... */

  height: 100%;

  /* ...as content is added (won't scroll) */

  background: turquoise;

}

.footer {

  display: table-row;

  background: lightgray;

}


<div class="wrapper">

  <div class="content">

    <h2>Content</h2>

  </div>

  <div class="footer">

    <h3>Sticky footer</h3>

    <p>Footer of variable height</p>

  </div>

</div>

需要注意的是CSS是设计用于布局 文档的 ,而不是Web应用程序屏幕的。CSS
display:table属性虽然非常有效,并且在所有主流浏览器中都受支持。这与使用
结构 表进行布局不同。



 类似资料:
  • 问题内容: 当我有一个页面可以通过CSS动态设置高度(例如,从数据库获取信息)时,如何将页脚div始终保持在窗口底部? 如果您想使用jQuery,我想出了这一点并且效果很好: 设置页脚的CSS: 设置脚本: 该脚本必须位于代码的末尾。 问题答案: 我相信您正在寻找 粘性页脚 从上面的文章: layout.css: html页面:

  • 问题内容: 设置网页的最佳做法是什么,以便在该网页上显示的内容/文本很少的情况下,页脚显示在浏览器窗口的底部,而不是显示在网页的中途? 问题答案: 您正在寻找的是 CSS Sticky Footer 。

  • 我想要一个: > 在页面底部,即使 在身体的正常流动中,在

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

  • 这是我的HTML: 这是我的CSS,仅用于页脚:

  • 问题内容: 我有以下页面(deadlink:),它的页脚位于该页面的底部,我无法定位。 我想要页脚 当页面短且屏幕未填满时,请粘在窗口底部,并且 当内容多于内容(而不是内容重叠)时,请停留在文档末尾并照常向下移动。 CSS被继承并迷惑了我。我似乎无法适当地更改它以在内容上放置最小高度或使页脚移至底部。 问题答案: 一个简单的方法是让身体您的网页,用的了。如果页脚的高度没有变化,则效果很好。 将页脚