我有主元素和页脚，主元素是display: flex;，页脚是position: absolute;，为了保持它在底部，它可以很好地工作，直到调整大小(移动(。调整大小以查看页脚冲突！
我也想在手机底部保留页脚。
此处显示实时代码
#main { display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 10px;
align-items: flex-start;
font-size: 40px;
}
#main div {
margin: 10px;
}
footer {
position: absolute;
bottom: 0;
color: red;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="main">
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
</div>
<footer>
Footer
</footer>
</body>
</html>我以前遇到过这个问题，发现添加JavaScript文件有助于计算的屏幕大小
window.addEventListener("load", activateFooter);
function activateFooter() {
adjustFooterSticky();
window.addEventListener("resize", adjustFooterCssTopToSticky);
}
function adjustFooterSticky() {
let footer = document.querySelector("#footer");
let bounding_box = footer.getBoundingClientRect();
let footerHeight = bounding_box.height;
let pageHeight = window.innerHeight;
let aboveFooter = bounding_box.top - TopAttribute(footer);
if (aboveFooter + footerHeight <= pageHeight) {
let new_footer_top = pageHeight - (aboveFooter + footerHeight);
footer.style.top = new_footer_top + "px";
}
else if (aboveFooter + footerHeight > pageHeight) {
footer.style.top = null;
}
}
function TopAttribute(htmlElement) {
let top_string = htmlElement.style.top;
if (top_string === null || top_string.length === 0) {
return 0;
}
let top_pixels = top_string.substring(0, top_string.length - 2);
return parseFloat(top_pixels);
}
然后将页脚定位在任何屏幕尺寸的屏幕尺寸底部
当您切换媒体时，您可以简单地使用媒体查询来定义元素的位置和大小。这里是移动的媒体查询
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
下面是你的例子，如果你将其调整为移动，页脚将停留在底部
#main {
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 10px;
align-items: flex-start;
font-size: 40px;
}
#main div {
margin: 10px;
}
footer {
position: absolute;
bottom: 0;
color: red;
text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
footer {
bottom: 0;
}
}<body>
<div id="main">
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
<div id="container">hel</div>
</div>
<footer>
Footer
</footer>