Частично исправленный или липкий колонтитул или что-то посередине - PullRequest
Новая
       49

Частично исправленный или липкий колонтитул или что-то посередине

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

Я использую Bootstrap 4.3.

После большого исследования я не нашел решения для своей проблемы. Я создаю базовый шаблон для раздела сайта. У меня разные веб-страницы с разной высотой. Мне нужно сделать следующее с нижним колонтитулом:

Когда содержимое меньше высоты области просмотра:

When content is less than the viewport height

Когда содержимое превышает высоту области просмотра, но не прокручивается вниз до конца содержимого:

When the content is bigger than the viewport

При прокрутке вниз:

When scrolled down

Мой код: 

#footer_wrap {
    position: fixed;
    bottom: -84px;
    height: 84px;
    width: 100%;
    background-color: #ffffff;
}
footer {
    position: absolute;
    bottom: 0;
    z-index: 9999;
    position: relative;
    width: 100%;
    border: solid 1px red;
}
#visible-part {
    position: absolute;
    width: 61px;
    height: 23px;
    top: -23px;
    left: 50%;
    background: #ddd;
    z-index: 9999;
    cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col">Main Column</div>
    </div>
</div>

<div id="footer_wrap">
    <footer id="footer">
        <div id="visible-part" class="row">
            <div class="col">Visible part of the footer</div>
        </div>
        <div id="hidden-part" class="row">
            <div class="col-6">Some footer content</div>
            <div class="col">More footer content</div>
        </div>
    </footer>
</div>

Я сделал тысячи вариантов, но все еще не работает.

Если вы хотите поиграть здесь, у вас есть Jsfiddle .

...