Как поставить нижний колонтитул в конец страницы? - PullRequest
Новая
       12

Как поставить нижний колонтитул в конец страницы?

0 голосов
/ 11 сентября 2018

Я не хочу, чтобы это было исправлено внизу, я просто хочу, чтобы оно было в конце, даже если на странице нет содержимого.

Как видите ... проблема в том:

enter image description here

Я искал в Google об этом, и я попытался поставить CSS вроде: 

footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

Но это не сработало. 

<!-- Footer -->
<footer class="page-footer font-small teal pt-4 bgFooter rodape">

    <!-- Footer Text -->
    <div class="container-fluid text-center text-md-left">

      <!-- Grid row -->
        <div class="row">

        <!-- Grid column -->
            <div class="col-md-12 text-center mt-md-0 mt-3 text-light" style="font-family: 'Quicksand', sans-serif;">

              <!-- Content -->
                <h5 class="text-uppercase pb-3">Social</h5>

                <div class="mb-4">

                    <a class="btn btn-outline-danger pl-3 pr-3" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>

                    <a class="btn btn-outline-danger ml-3 mr-3" href="" target="_blank"><i class="fab fa-twitter"></i></a>

                    <a class="btn btn-outline-danger" href="" target="_blank"><i class="fab fa-instagram"></i></a>

                </div>

            </div>

        </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Text -->

    <!-- Copyright -->
    <div class="footer-copyright text-center text-light small ml-2 py-3" style="font-family: 'Quicksand', sans-serif;">© 2018 Teste |
        <a href="?p=privacidade" class="linkPolitica" style="font-family: 'Quicksand', sans-serif;"> Política de privacidade</a>
    </div>
    <!-- Copyright -->

</footer>
  <!-- Footer -->

Ответы [ 5 ]

0 голосов
/ 11 сентября 2018

Есть несколько способов сделать это. Давайте начнем с самого простого метода.

Если установлена ​​высота нижнего колонтитула (не изменится, независимо от ширины браузера или содержимого нижнего колонтитула), вы можете использовать отрицательное поле для нижнего колонтитула.

Давайте возьмем эту HTML-структуру в качестве примера: 

<body>
  <div class="container">
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</body>


html,
body {
 height: 100%; // First we set the height to make sure the body is always atleast big enough
}

.container {
  min-height: 100%; // The container will always be 100% height at minimum;
}

.content {
  padding-bottom: 100px; // This is set to the footer height
}

.footer {
  height: 100px; // The footer has a set width
  margin-bottom: -100px; // We move the footer in the negative space that was created by the padding
}

Рекомендуется:

Немного сложнее становится, когда высота нижнего колонтитула не установлена. Скорее всего, так и будет, так как ваш сайт может быть адаптивным.

В этом случае мы будем использовать flexbox . 

    html, 
    body {
      height: 100%;
      margin: 0;
    }
    
    .container{
      display: flex; 
      flex-direction: column; 
      height: 100vh;
    }
    
    .content {
      background: gray;
      flex: 1 0 auto; 
    }
    
    .footer {
      background: blue;
      height: 30px;
      flex-shrink: 0; 
    }
<div class="container">
  <div class="content"></div>
  <div class="footer"></div>
</div>

Мы устанавливаем контейнер на flex. Дочерние элементы в гибком контейнере «растут», чтобы заполнить их родительский элемент. Мы устанавливаем flex на column, чтобы отображать их под друг другом, а не рядом друг с другом. Этот контейнер установлен на 100vh. vh означает «Высота окна просмотра» или высоту окна. Содержание установлено на flex: 1 0 auto. Это позволит ему расти 1, но не уменьшаться 0, а его размер будет auto

Нижний колонтитул никогда не должен уменьшаться flex-shrink: 0, независимо от размера другого содержимого.

Вы также можете взглянуть на css grid . Однако, так как я предполагаю, что вы немного новичок в этом, я рекомендую придерживаться flex сейчас! Flexbox замечательно, когда вы понимаете, на что он способен.

0 голосов
/ 11 сентября 2018

Вы можете сделать следующее, используя position: absolute;

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

ИЛИ Простой метод - сделать тело вашей страницы 100% с min-height 100%.Это прекрасно работает, если высота вашего нижнего колонтитула не изменяется.

Дайте нижнему колонтитулу отрицательный margin-top: 

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}
0 голосов
/ 11 сентября 2018

Вам просто нужно установить min-height: 100% для html и body, как показано ниже: 

html, body {
    min-height: 100%;
}
0 голосов
/ 11 сентября 2018

Попробуйте использовать сетку CSS, проверьте этот пример:

HTML 

<header>
</header>
<main>
</main>
<footer>
</footer>

CSS 

html, body {
  width: 100%;
  height: 100%;
 margin:0;
 padding:0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

header {
  background: red;
}

main {
  background: grey;
}

footer {
  background: purple;
}

ДЕМО ЗДЕСЬ

0 голосов
/ 11 сентября 2018

У меня нет вашего кода, но хорошее решение - сначала установить минимальную высоту вашего тела на 100% страницы.Затем вы устанавливаете верхний колонтитул на x%, нижний колонтитул на y% и минимальную высоту содержимого вашей страницы на 100- (x + y)%.Пример кода:

HTML:

<body>
    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
</body>

CSS:

html {
    min-height: 100%;
}
body {
    display: inline-block;
    min-height: 100%;
}
header {
    height: 10%;
    display: inline-block;
}
footer {
    height: 10%;
    display: inline-block;
}
main {
    min-height: 80%; 
    display: inline-block;
}

Надеюсь, это поможет;)

...