强制页脚停留在底部是一种网页设计技术,用于确保页脚始终显示在用户浏览器窗口的底部。这种技术可以提高用户体验,使页面看起来更加整洁和美观。以下是一些实现强制页脚停留在底部的方法:
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex-grow: 1;
}
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.container {
position: relative;
min-height: 100vh;
}
.content {
padding-bottom: 60px; /* 页脚高度 */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
function stickyFooter() {
const content = document.querySelector('.content');
const footer = document.querySelector('.footer');
const contentHeight = content.offsetHeight;
const footerHeight = footer.offsetHeight;
const windowHeight = window.innerHeight;
if (contentHeight + footerHeight< windowHeight) {
content.style.paddingBottom = `${windowHeight - contentHeight}px`;
} else {
content.style.paddingBottom = '0';
}
}
window.addEventListener('resize', stickyFooter);
stickyFooter();
这些方法都可以实现强制页脚停留在底部的效果。具体实现方式可以根据网站的布局和需求进行选择。
领取专属 10元无门槛券
手把手带您无忧上云