当前位置：文江博客话题详情

如何让页脚始终位于页面底部？

发布于 2024-12-06 04:31:53 字数 49 浏览 1 评论 0原文

我的页面不包含很多信息，因此页脚显示在页面中间的某个位置。我怎样才能让它永远在底部？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谷夏 2024-12-13 04:31:53

jquery 移动方法 -

回复收藏 0 原文

心意如水 2024-12-13 04:31:53

{
  potition: absolute;
  bottom: 0;
  width: 100%;
  height: some_height;
}

{
  potition: absolute;
  bottom: 0;
  width: 100%;
  height: some_height;
}

回复收藏 0 原文

╰つ倒转 2024-12-13 04:31:53

这不是固定位置页脚。如果页面内容高于屏幕，页脚将超出屏幕。我认为这样看起来更好。

body 和 .ui-page min-height 和 height 是必要的，以防止页脚在转换过程中上下跳跃。

适用于目前最新的 JQM 版本 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

Works with the latest JQM version as of now, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

回复收藏 0 原文

放肆 2024-12-13 04:31:53

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

回复收藏 0 原文

~没有更多了~