footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
width: 100%;
position: fixed;
bottom: 0;
}
css样式(打个比方)
<footer>
<p>© xxxxx All rights reserved.</p>
</footer>
html语句
当内容不可以铺满整个页面的时候,底部设置可以采用悬浮的形式。使用position: fixed;
会将footer
固定在视口底部,而不是页面底部。如果页面内容超过一屏高度,用户滚动页面时,footer
将始终可见。如果你希望footer
在页面底部,而不是视口底部,可以使用其他方法,如Flexbox布局等。
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
/* position: fixed; <-- 移除这行 */
/* bottom: 0; <-- 移除这行 */
width: 100%;
position: relative; /* 添加这行 */
margin-top: 20px; /* 调整与页面内容的间距 */
}
css样式
position: relative;
属性,会使得footer
元素相对于其正常位置进行定位。
<footer>
<p>© xxxxx All rights reserved.</p>
</footer>
html语句
当内容没有铺满整个页面的时候,采用相对位置定位底部,就会出现底部悬浮的效果。
如果页面铺满了,建议采用相对定位方式对底部进行css样式设计,不然就会出现内容显示不出来的效果。看一下效果图,如果采用相对定位就会出现这种情况
如果采用悬浮的形式,就会出现这种情况
这大概就是position: fixed;和position: relative;的区别。学习有感而发,如有错误或者意见,望指正。