Сделать бутстрэп нижнего колонтитула в нижней части содержимого

Прошло 3 дня с тех пор, как я пытаюсь сделать нижний колонтитул внизу содержимого веб-страницы. Я знаю, что есть много подобных вопросов, но я не мог найти ничего в качестве решения. Вот мой код:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{position:relative;}
 footer{position:absolute;bottom:0;}
 <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>

   
</div> </div>

0

6 ответы

If you want it to be at the bottom of the page & not the viewport you have to set height for the content so that the absolute footer will be at the bottom.

Else change its relative parent class. Here I set body as the parent for the footer

Попробуй это..

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body{position:relative;}
.container{
height:800px;
}

footer{
position:absolute;
bottom:0;
left:0;
}
<div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

1
добавлено
Я обновил ответ, пожалуйста, посмотрите это тоже!
добавлено автор Viira, источник
Я хочу, чтобы это было только в нижней части веб-страницы. Не липкий
добавлено автор ElleWilliamssss, источник

Вы можете использовать приведенный ниже пример для того же.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 50px;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.

</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>
</div> </div>
0
добавлено

Вы можете использовать приведенный ниже пример для того же.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 50px;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.

</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>
</div> </div>
0
добавлено

use position:sticky;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

container{position:relative;}
footer{position:sticky;bottom:0;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row h-100">
        <div class="col">
          
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

</div>
</div> </div>

OR use position:relative to .container with .col{padding-bottom:5rem; }

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{
position:relative;
}
.col{
padding-bottom:5rem;
}
footer{
   
   position: absolute;
    bottom: 0;
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

0
добавлено
что ты имеешь ввиду?
добавлено автор לבני מלכה, источник
смотри мое редактирование, пожалуйста
добавлено автор לבני מלכה, источник
Нет, я не хочу, чтобы это было в нижней части окна просмотра. Я хочу, чтобы это было внизу страницы.
добавлено автор ElleWilliamssss, источник

use position:sticky;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

container{position:relative;}
footer{position:sticky;bottom:0;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row h-100">
        <div class="col">
          
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

</div>
</div> </div>

OR use position:relative to .container with .col{padding-bottom:5rem; }

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{
position:relative;
}
.col{
padding-bottom:5rem;
}
footer{
   
   position: absolute;
    bottom: 0;
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

0
добавлено
что ты имеешь ввиду?
добавлено автор לבני מלכה, источник
смотри мое редактирование, пожалуйста
добавлено автор לבני מלכה, источник
Нет, я не хочу, чтобы это было в нижней части окна просмотра. Я хочу, чтобы это было внизу страницы.
добавлено автор ElleWilliamssss, источник

Если вы хотите, чтобы он придерживался нижней части контейнера , используйте position: относительный или просто полностью удалите position , тот же результат

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)