个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
在我制作的 HTML 页面中，我想添加一个页脚。我正在使用 Bootstrap 和 this example显示页脚元素可以定位到页面底部，而无需将页脚元素放在容器元素内(直接在主体元素内，在容器元素下方)。
每当我自己尝试这个时，看起来元素首先会定位到底部。但后来我注意到在其他页面(内容更长)上，页脚开始出现在浏览器的底部而不是 body 元素。效果是页脚上方的容器元素将显示在页脚后面和下方，而页脚不会到达主体元素的底部。
确保滚动到我编写的以下代码示例中:
.body {
overflow: scroll;
background-color: tomato;
/*The height is set so that an overflow: scroll; can happen, to reproduce
my sitation. When the content of the body tag is too long, the browser will
show a scroll bar and when scrolling down, the footer does not appear on the
bottom anymore but somewhere in the middle or maybe even top side, depending on
how long the body would become. */
height: 300px;
position: relative;
}
.container {
background-color: yellow;
/*This would be a dynamic number, when removing this property.
If you do not really understand the idea I am talking about, try to change
this value and see for yourself what happens (with the footer element).
The height is set only for the sake of showing the issue. */
height: 500px;
}
footer {
background: #e0f2f7;
position: absolute;
bottom: 0;
width: 100%;
}<div class="body">
<h2>
Foo
</h2>
<div class="container">
asdasds
</div>
<footer>sadasdsa</footer>
</div>我该怎么做才能让我的页脚元素表现得像 Bootstrap example 中的一样？ (以便它始终粘在底部)并且不必将页脚元素放在某个容器元素中？
最佳答案
如果您希望页脚始终在网站底部可见，而不是在容器上方。您需要添加 min-height:100% & position:relative to html 而不是 body。对于 body 元素，您需要添加带有页脚高度值的 margin-bottom。
html{
min-height:100%;
position: relative;
}
body {
background-color: tomato;
margin:0 0 60px 0;
padding:0;
}
.container {
background-color: yellow;
height: 300px;
}
footer {
background: #e0f2f7;
position: absolute;
bottom: 0;
width: 100%;
height:60px;
}<html>
<body>
<h2>Foo</h2>
<div class="container">asdasds</div>
<footer>sadasdsa</footer>
</body>
</html>编辑 1:
如果你想使页脚动态高度使用这个 JS 代码(如果你使用 jQuery)
$( document ).ready(function() {
var height = $( 'footer' ).height();
$( 'body' ).css('margin-bottom',height + 'px');
});
关于html - Bootstrap 页脚元素位置 bottom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36216929/
25
4
0
我是一名优秀的程序员,十分优秀！