Абсолютный конфликт дисплея и положения при изменении размера - PullRequest
Новая
       3

Абсолютный конфликт дисплея и положения при изменении размера

1 голос
/ 12 июля 2020

У меня есть главный элемент и нижний колонтитул, главный элемент - 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>

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Вы можете просто использовать медиа-запросы, чтобы определить место и размер вашего элемента, который вы должны использовать, когда, когда вы переключаете медиа, вот медиа-запрос для мобильного 

/* 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>
1 голос
/ 12 июля 2020

У меня уже была эта проблема раньше, и я обнаружил, что добавление файла 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);
}

Затем нижний колонтитул находился внизу экрана любого размера. размер экрана

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...