Создание нижнего колонтитула всегда снизу - PullRequest
Новая
       0

Создание нижнего колонтитула всегда снизу

1 голос
/ 27 марта 2020

Я пытаюсь сделать так, чтобы нижний колонтитул моего сайта ВСЕГДА находился внизу веб-страницы. Независимо от того, является ли содержимое веб-страницы слишком маленьким, чтобы занимать весь экран, или если в нем так много контента, что вам необходимо прокрутить нижний колонтитул, он всегда должен быть внизу экрана ... Например ... Я сделал следующий код, чтобы помочь продемонстрировать проблему ...

Проблема в том, что, хотя есть только один div "Placeholder", нижний колонтитул просто помещается под ним (он должен быть в самом низу страницы, как что происходит, когда все заполнители не комментируются).

Как мне этого добиться? 

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100%;
}

.Placeholder
{
  background-color: blue;
  height: 100px;
  width: 100%;
}

.MainContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: green;
}

.MyFooter {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}
<html>
  <head>
  </head>
  <body>
    <div class='Header'>Header</div>
    <div class="MainContainer">
      <div class='Placeholder'></div>
      <!-- Uncomment these to populate the container.
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      !-->   
    </div>
    <div class="MyFooter">
      This is my footer, it should always be at the bottom of the page.
    </div>
  </body>
</html>

Ответы [ 6 ]

0 голосов
/ 27 марта 2020

Вы можете использовать bottom: 0 и bottom: auto, чтобы исправить это.
Но сначала вы должны установить высоту тела на 100%, чтобы нижний колонтитул мог оставаться в нижней части страницы, когда есть один "заполнитель" ".

Вот код с одним" заполнителем ": (bottom: 0px;) 

let h = window.innerHeight;

var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";

window.addEventListener('resize', function(event){
    x = document.getElementsByTagName("BODY")[0];
    h = window.innerHeight;
    x.style = "height: " + h + "px;";
});

if(document.getElementById('main').offsetHeight > h) {
  document.getElementById('footer').style = "bottom: auto;";
}
* {
  margin: 0;
  padding: 0;
}

.Placeholder
{
  background-color: blue;
  height: 100px;
  width: 100%;
}

.MainContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: green;
}

.MyFooter {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}
<body>
  <div class='Header'>Header</div>
  <div class="MainContainer" id="main">
    <div class='Placeholder'></div>
  </div>
  <div class="MyFooter" id="footer">
    This is my footer, it should always be at the bottom of the page.
  </div>
</body>

А вот код со всеми «заполнителями»: (bottom: auto;) 

let h = window.innerHeight;

var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";

window.addEventListener('resize', function(event){
    x = document.getElementsByTagName("BODY")[0];
    h = window.innerHeight;
    x.style = "height: " + h + "px;";
});

if(document.getElementById('main').offsetHeight > h) {
  document.getElementById('footer').style = "bottom: auto;";
}
* {
  margin: 0;
  padding: 0;
}

.Placeholder
{
  background-color: blue;
  height: 100px;
  width: 100%;
}

.MainContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: green;
}

.MyFooter {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}
<body>
  <div class='Header'>Header</div>
  <div class="MainContainer" id="main">
    <div class='Placeholder'></div>
    <div class='Placeholder'></div>
    <div class='Placeholder'></div>
    <div class='Placeholder'></div>
    <div class='Placeholder'></div>
  </div>
  <div class="MyFooter" id="footer">
    This is my footer, it should always be at the bottom of the page.
  </div>
</body>


CodePen: https://codepen.io/marchmello/pen/xxGmqaY
0 голосов
/ 27 марта 2020

Я предлагаю вам go и прочитать о позиции элементов один раз. Всего наилучшего. Здесь вам могут помочь небольшие изменения. Просто измените положение своего MyFooter класса. т.е. 

.MyFooter {
   position: fixed;
}
0 голосов
/ 27 марта 2020

Единственное, что вам нужно было изменить, это ценность позиции. правильная позиция для того, что вы ищете, это позиция: фиксированная 

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100%;
}

.Placeholder
{
  background-color: blue;
  height: 100px;
  width: 100%;
}

.MainContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: green;
}

footer {
 background-color: red;
 position: fixed;
 bottom: 0;
 width: 100%;
 height: 40px;
}
<html>
  <head>
  </head>
  <body>
    <div class='Header'>Header</div>
    <div class="MainContainer">
      <div class='Placeholder'></div>
      <!-- Uncomment these to populate the container.
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      !-->   
    </div>
    <footer>
      This is my footer, it should always be at the bottom of the page.
    </footer>
  </body>
</html>
0 голосов
/ 27 марта 2020

Исправлено использование нижнего колонтитула position: fixed

Вот пример 

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100%;
}

.Placeholder
{
  background-color: blue;
  height: 100px;
  width: 100%;
}

.MainContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: green;
}

.MyFooter {
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1030;
   width: 100%;
   background-color: red;
   padding: 0;
   margin: 0;
}
<html>
  <head>
  </head>
  <body>
    <div class='Header'>Header</div>
    <div class="MainContainer">
      <div class='Placeholder'></div>
      <!-- Uncomment these to populate the container.
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      !-->   
    </div>
    <div class="MyFooter">
      This is my footer, it should always be at the bottom of the page.
    </div>
  </body>
</html>
0 голосов
/ 27 марта 2020

Все, что вам нужно добавить, это 

html, body{
height: 100%;
}

Это должно решить проблему 

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100%;
}

html, body{
height: 100%;
}

.Placeholder
{
  background-color: blue;
  height: 100px;
  width: 100%;
}

.MainContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: green;
}

.MyFooter {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}
<html>
  <head>
  </head>
  <body>
    <div class='Header'>Header</div>
    <div class="MainContainer">
      <div class='Placeholder'></div>
      <!-- Uncomment these to populate the container.
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      <div class='Placeholder'></div>
      !-->   
    </div>
    <div class="MyFooter">
      This is my footer, it should always be at the bottom of the page.
    </div>
  </body>
</html>
0 голосов
/ 27 марта 2020

Вам нужно отрегулировать рост. Попробуйте добавить height: 100vh; к вашему body CSS классу.

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

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

...