Bootstrap липкого нижнего колонтитула 4

Я пытаюсь сделать липкий нижний колонтитул с помощью bootstrap 4. Как мне убедиться, что независимо от того, сколько контента, он всегда остается внизу экрана? Я искал другие ответы для липких нижних колонтитулов и не смог заставить их работать, поэтому я хотел поделиться своим кодом. Я пытался изменить положение с фиксированного, абсолютного и относительного, но ничего из этого не работает. В другом проекте мне удалось заставить его работать с absolute. Это связано с моим css для html и тела?

HTML

<footer class="footer">
    <!-- <div class="container-fluid"> -->
    <a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a>
    <a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a>
    <a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
    </a>
    <a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
    </a>
    <p id="copyRight">@Copyright 2018 www.lucasstahl.com</p>
    <!-- </div> -->
</footer>

CSS

body,
html {
width: 100%;
height: 100%; 
/* min-height: 100%;
position: relative; */
background-position: center;
background-image: url("clark.png");
background-size: cover;
}

.footer {
/* clear: both; */
/* position: absolute; */
background-color: rgb(229, 240, 136);
text-align: center;
color: rgb(175, 167, 166);
border-top: 5px solid  rgb(175, 167, 166);
overflow: hidden;
padding-top: 20px;
bottom: 0;
width: 100%;
height: 100px;
}

У меня проблема в том, что он перемещает нижний колонтитул в зависимости от размера экрана. Он не будет оставаться там все время.


css footer sticky-footer
person Stahlwalker    schedule 08.03.2018    source источник
comment
Вы проверили официальный пример и < a href="http://meta.stackoverflow.com/questions/261592">пробовали что-то сами? Где именно при воспроизведении примера вы застреваете?   -  person Obsidian Age    schedule 09.03.2018
comment
Какой код у вас есть до сих пор?   -  person Paul McLoughlin    schedule 09.03.2018
comment
css-tricks.com/couple-takes-sticky-footer   -  person Dan Oswalt    schedule 09.03.2018

Ответы (1)


arrow_upward
2
arrow_downward

Для разных экранов вам потребуется использовать медиа-запросы. Это позволит вам определить, как будет выглядеть нижний колонтитул для каждого размера экрана.

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ Судя по всему, то, что вам нужно

Посмотрите на код, который я предоставил jsfiddle.

<footer class="footer">
  <!-- <div class="container-fluid"> -->
  <nav>
    <li><a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a></li>
    <li><a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a></li>

    <li><a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
        </a></li>
    <li><a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
        </a></li>

    <li id="copyRight">@Copyright 2018 www.lucasstahl.com</li>
  </nav>
  <!-- </div> -->
</footer>

CSS

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: yellow;
  }

  nav {
    display: flex;
    list-style: none;
  }
person Paul McLoughlin    schedule 08.03.2018
comment
Это нормально, обычно вы сначала выполняете поиск по сайту, если вопрос не задавался раньше, затем вы спрашиваете и предоставляете код, если он у вас есть. Если на ваш вопрос был дан ответ, вы примете ответ в том виде, в котором он был предоставлен. - person Paul McLoughlin; 09.03.2018
comment
Хорошо, я вернулся и добавил свой код, извините, это был мой первый пост, я не знал 4 отступа, чтобы добавить свой код. Кроме того, я раньше просматривал липкие нижние колонтитулы, но я продолжаю видеть фиксированные или абсолютные. Когда я использую абсолютный, он перемещает его в середину страницы, если я устанавливаю фиксированный, он обрезает содержимое внизу. - person Stahlwalker; 09.03.2018
comment
@Stahlwalker Включите HTML и связанный с ним CSS или используйте JS Fiddle. - person Paul McLoughlin; 09.03.2018
comment
Хорошо добавил мой HTML - person Stahlwalker; 09.03.2018
comment
Спасибо, Пол, это было связано с моим файлом index.html, не связанным с моим нижним колонтитулом, но мне пришлось снова включить абсолютную позицию, как только я это исправил. Спасибо большое. - person Stahlwalker; 09.03.2018
comment
@ Сталуокер Нет проблем. - person Paul McLoughlin; 09.03.2018