调整大小时显示弹性和定位绝对冲突

提问者：小点点

调整大小时显示弹性和定位绝对冲突

我有主元素和页脚，主元素是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>

null

共2个答案

匿名用户

我以前遇到过这个问题，发现添加一个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 */
}

下面是您的示例，如果您将其大小调整为移动，页脚将留在底部

null

#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>

调整大小时显示弹性和定位绝对冲突

共2个答案

相关问题

热门标签

调整大小时显示弹性和定位绝对冲突

共2个答案

相关问题

热门标签

微信关注