个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
这是我的 jsFiddle带有完整的代码示例。
我正在尝试实现 sticky footer .如您所见，我的登录表单非常简短。尽管如此，页脚应该一直固定到页面底部。我试过:
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background: url(images/footer.jpg) no-repeat;
}
但这行不通。知道我可以添加什么确切的 JS/CSS 来修复我的粘性吗？
最佳答案
CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
JS
(function ($) {
var height = $('footer').height();
//update the value when page is loaded
$(document).ready(function () {
$('body').css({"margin-bottom" : height });
});
//update the value when the browser is resized (useful for devices which switch from portrait to landscape)
$(window).resize(function () {
$('body').css({"margin-bottom" : height });
});
})(jQuery);
HTML
<body>
<header>
.....
</header>
<div class="content">
......
</div>
<footer>
......
</footer>
</body>
关于css - Bootstrap 3 : Sticky footer not so sticky，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26796983/
26
4
0
鉴于下面的基本 HTML 结构(我无法更改)，我知道我可以使用此 CSS 扩展主要内容 div: html, body { height: 100%; } body { display: fl
这应该类似于 iOS tableview 页脚，也可以在各种网站中看到(粘性页脚)。 我想实现以下目标: A 是具有可变行数的 RecyclerView。 当 A 小于屏幕(或父级)尺寸时，B(页脚)
我有一个 Bootstrap 面板，底部有两个按钮: {{ Form::open( array('route' => array('dogs.edit', $dog->id)
我是一名优秀的程序员,十分优秀！