Изменение свойств футера при изменении размеров контента

114

14 марта 2022, 09:10

нужно сделать так чтобы если содержимое страницы больше чем 100% высоты экрана позиция футера менялась на static, а если меньше чем сто и еще минус высота футера, то позиция футера менялась на absolute получилось что-то такое но это не работает

решение кроется в простом можно решить это с помощью css

html
<html><head>голова сайта</head>
<body><header>навигационное меню
</header><main>
содержимое так сказать то ради чего пользователи здесь собрались
</main><footer>ваш колонтитул
</footer><body>
</html>

css
html,body{
  height:100%;
  overflow-x: hidden;//если требуется
  }
main{
  width:100%; //на всякий
  margin-top:60px; //отступ сверху если требуется
  min-height:calc(100% - высота колонтитула - высота отступа сверху)//решение
}

Answer 1

Так ? Вам нужно изучить основы Javascript, а далее его возможности работы с DOM в браузере

const footer = document.querySelector('footer') 
 
function changeFooterPositionAccordingWindowHeight() { 
  if (window.innerHeight > document.body.clientHeight) { 
    document.body.style.paddingBottom = '0' 
    footer.style.position = 'static' 
  } else { 
    document.body.style.paddingBottom = '100px' 
    footer.style.position = 'fixed' // absolute 
  } 
} 
 
changeFooterPositionAccordingWindowHeight()

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
body { 
  font-family: 'Roboto', sans-serif; 
  position: relative; 
} 
 
.content { 
  height: calc(100% - 100px); 
  font-size: 18px; 
  line-height: 28px; 
} 
 
footer { 
  height: 100px; 
  width: 100%; 
  box-shadow: 0px -1px 0px 0px firebrick; 
  background: white; 
  padding: 15px; 
  left: 0; 
  bottom: 0; 
}

<div class="content"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
  ex (конец контента) 
</div> 
<footer>Footer</footer>

Answer 2

Если не надо поддерживать IE и нужно чтобы футер всегда был в области видимости, то можно просто использовать "position: sticky"

.container { 
  width: 200px; 
} 
 
footer { 
  position: sticky; 
  bottom: 0; 
  height: 50px; 
  width: 100%; 
  padding: 15px; 
  box-shadow: 0px -1px 0px 0px firebrick; 
  background: white; 
}

<div class="container"> 
<div class="content"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
  ex (конец контента) 
</div> 
<footer>Footer</footer> 
</div>

Answer 3

Если правильно понимаю вопрос, то вот самое простое решение на CSS:

var toggle = document.getElementById("toggle"); 
var content = document.getElementById("content__more"); 
toggle.addEventListener("click", function() { 
  content.classList.toggle("show"); 
});

html, 
body { 
  margin: 0; 
  height: 100%; 
} 
 
.wrapper { 
  min-height: 100%; 
  margin: 0 auto -80px; 
} 
 
.footer, 
.header { 
  background: burlywood; 
} 
 
.header { 
  height: 40px; 
} 
 
.footer { 
  height: 80px; 
} 
 
#content__more { 
  display: none; 
  height: 1000px; 
  background: bisque; 
} 
 
#content__more.show { 
  display: block; 
}

<div class="wrapper"> 
  <div class="header">Шапка</div> 
  <div class="content"> 
    <p>Содержимое страницы</p> 
    <button id="toggle">Увеличить/Уменьшить Содержимое страницы</button> 
    <div id="content__more">Много содержимого страницы</div> 
  </div> 
</div> 
<div class="footer">Подвал</div>