it-roy-ru.com

Bootstrap div растягивается до нижней части страницы

У меня есть настройка по умолчанию для шаблона начальной загрузки, и моя проблема в том, что между div и нижним колонтитулом есть пробел. Пробел вызван нехваткой содержимого для заполнения всей страницы, поэтому тело отображается между нижним колонтитулом и содержимым div. Есть ли способ растянуть загрузочный элемент div до нижней части страницы, а также заставить нижний колонтитул оставаться в самом низу? Возможно с гибкой коробкой?

Вот код, с которым я работаю: (пытаясь растянуть div "wrapper" в нижний колонтитул)

HTML

<body ng-app="firstApp">
    <div ng-view="" class="everything">

        <div class="wrapper">
            <div class="mid">
                <div class="row">
                    <div class="col-sm-12">
                        <p>This is in a div that should fill the screen</p>
                    </div>
                </div>
            </div>
           <div class="Push"></div>
        </div>

       <footer class="footer">
           <div class="container">
               <p>Hello I'm the footer</p>
           </div>
       </footer>
</div> <!--closes the "everything" class -->

CSS

    html {
        height: 100%;
    }

 body {
    height: 100% !important;
    font-family: 'Roboto', sans-serif;
    color: black;
    background: green;
 }

.footer {
    text-align: center;
    padding: 30px 0;
    height: 4em;
    background-color: #7ccbc8;
    width: 100%;
}

Я прочитал много сообщений на тему stackoverflow по этой теме, но я все еще не совсем понимаю, как это сделать. 

10
Troy Griffiths

Трой, вот оно, чтобы ты мог это сделать. 

Задайте для html и body значение height:100vh;, а также установите для div одинаковый height:100vh; 

Вы можете увидеть это в этом посте, который имел ту же проблему.

14
AngularJR

Что мне помогло, так это установить оба параметра height: 100%; и min-height: 100vh; в элементе fill. 

.fill {
    min-height: 100vh;
    height: 100%;
}

И добавление этого элемента в классы родительского контейнера.

1
Thomas Weinmüllner