Фиксированное пространство снизу страницы, но отзывчивый стиль - PullRequest
Новая
       13

Фиксированное пространство снизу страницы, но отзывчивый стиль

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

Итак, я хочу иметь фиксированное пространство снизу, как показано на рисунке:

Цель состоит в том, чтобы весь контент оставался на одной странице без необходимости прокрутки enter image description here

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

enter image description here

Я не хочу делать position: fixed/absolute, поскольку он будет перекрывать остальную часть верхнего содержимого.

Что я здесь не так делаю? Я использую полную страницу. js Кстати, я не знаю, возникла ли проблема оттуда. Это просто простая сетка, созданная с помощью bootstrap. Я пробовал position: fixed, но это просто ломает полную страницу. js

Вот код: 

<div class="section fp-auto-height-responsive s1" id="section0">
        <div class="intro">
            <img class="logo_top animated bounceInUp" src="img/lss_logo.png">

            <div class="box_under animated bounceInUp">

                <h1>_NAME</h1>
                <p>check our socials for more info</p>

                <div class="socialImgs">

                    <a href="https://instagram.com/" target="_blank">
                        <i class="fab fa-instagram fa-2x icon-rotate"></i>
                    </a>
                    <a href="https://www.facebook.com/" target="_blank">
                        <i class="fab fa-facebook fa-2x"></i>
                    </a>
                </div>
            </div>
            <div class="container" style="margin-top: 2%; margin-bottom: 100%;">
                <div class="row">
                    <div class="col-md-2 col-xs-6 animated fadeIn" style="animation-delay: 0.3s">
                        <a href="studio.php#Studio"><img src="img/shop.jpg" href="#getStarted" class="img-fluid" /></a>
                    </div>
                    <div class="col-md-2 col-xs-6 animated fadeIn" style="animation-delay: 0.6s">
                        <a><img src="img/shop.jpg" href="#getStarted" class="img-fluid" /></a>
                    </div>
                    <div class="col-md-2 col-xs-6 animated fadeIn" style="animation-delay: 0.9s">
                        <a><img src="img/shop.jpg" href="#getStarted" class="img-fluid" /></a>
                    </div>
                    <div class="col-md-2 col-xs-6 animated fadeIn" style="animation-delay: 1.2s">
                        <a><img src="img/shop.jpg" href="#getStarted" class="img-fluid" /></a>
                    </div>
                    <div class="col-md-2 col-xs-6 animated fadeIn" style="animation-delay: 1.5s">
                        <a><img src="img/shop.jpg" href="#getStarted" class="img-fluid" /></a>
                    </div>
                    <div class="col-md-2 col-xs-6 animated fadeIn" style="animation-delay: 1.8s">
                        <a><img src="img/shop.jpg" href="#getStarted" class="img-fluid" /></a>
                    </div>
                </div>
            </div>

        </div>
    </div>

РЕДАКТИРОВАТЬ: margin-bottom: не работает, так как нет ничего ниже этой сетки

...