Заполните высоту с помощью flexbox внутри контейнера

Question

Я занимаюсь разработкой интрасети, и я хотел бы иметь содержимое по вертикали и по горизонтали.

У меня есть веб-сайт, как это:

<div class="container"> 
 
    <!-- NAVBAR MENU --> 
 
</div> 
 
<!-- COULD BE container-fluid SOMETIMES --> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <!-- TITLE WITH A DROPDOWN BUTTON --> 
 
     <h2> 
 
      TITLE 
 
      <span class="pull-right"> 
 
      <button>BUTTON</button> 
 
      </span> 
 
     </h2> 
 
    </div> 
 
    </div> 
 
    <!-- CONTENT --> 
 
</div> 
 
<div class="container"> 
 
    <!-- FOOTER --> 
 
</div>

Содержимое всегда будет второй ребенок body внутри DIV с container или container-fluid с последующим названием прикрепленного с выпадающего меню на кнопка.

Важно знать, мой нижний колонтитул статичен и его высота составляет 60 пикселей.

Я пытаюсь получить flexbox внутри моего второго контейнера, ПОСЛЕ титульной части, которые заполняют всю оставшуюся высоту. Таким образом, только чистое содержимое будет сосредоточено.

К сожалению, я не могу дойти до этого момента.

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

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

html & body получил min-height: 100%;. align-items & justify-content были установлены.

Кроме того, я отмечаю, что если бы я установил html на height:100%;, он показывал бы полосу прокрутки каждый раз, но тогда единственная гибкая коробка получала бы полную отсутствующую высоту, но не центрировалась (и все еще имеет эту проблему нижнего колонтитула).

я, вероятно, что-то пропустил или сделал трюк неправильно ...

Спасибо за любую помощь!

Answer 1

Спасибо @RicardoRuiz за ответ.

Наконец-то выглядит следующий фрагмент.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.row, 
 
.content, 
 
.container { 
 
    border: 3px solid; 
 
    padding: 1em; 
 
} 
 
.container:first-child { 
 
    border-color: green; 
 
    height: 60px; 
 
} 
 
.container:nth-child(2) { 
 
    border-color: blue; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: calc(100vh-160px); 
 
} 
 
.container:last-child { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    border-color: red; 
 
    height: 60px; 
 
} 
 
.row { 
 
    border-color: yellow; 
 
} 
 
.content { 
 
    border-color: dodgerblue; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-basis: 100%; 
 
    padding-bottom: 60px; 
 
}

<div class="container"> 
 
    NAVBAR 
 
</div> 
 
<!-- COULD BE container-fluid SOMETIMES --> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <!-- TITLE WITH A DROPDOWN BUTTON --> 
 
    <h2> 
 
      TITLE 
 
      <span class="pull-right"> 
 
      <button>BUTTON</button> 
 
      </span> 
 
     </h2> 
 
    </div> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris 
 
     pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis. Nulla facilisi. Cras scelerisque tortor dignissim 
 
     lacus fringilla porta. Aliquam sagittis sit amet libero et ultrices. Praesent aliquet purus et ultrices semper. Integer sed lorem in augue volutpat convallis quis vel tellus. Duis venenatis orci id odio vehicula, eget feugiat lorem aliquam. Vivamus 
 
     at tempus magna, mattis consequat sem. Aliquam porta sem vitae diam mollis, ut fringilla velit lacinia. Fusce ac suscipit elit. Proin lectus mauris, viverra sed lobortis at, ultrices vel ipsum. Cras non molestie diam. Donec lobortis lobortis magna, 
 
     eget placerat mi tincidunt at. Quisque eget odio mauris. Nam eu tellus vitae nisl ornare finibus. Proin et enim aliquet, iaculis quam eleifend, mollis neque. Aenean auctor accumsan fermentum. Nam eget magna vehicula, tincidunt odio ut, vehicula 
 
     arcu. Nulla sit amet turpis lacus. Sed iaculis, velit ac hendrerit imperdiet, ante lectus malesuada felis, quis tempus nibh nisl at dui. Aliquam laoreet accumsan varius. Vestibulum vel quam arcu. Praesent id semper eros, quis mollis dui. Etiam at 
 
     sagittis lectus. Suspendisse in nisi bibendum nisl scelerisque pulvinar. Maecenas nec scelerisque augue. Donec elementum consequat tempor. Sed porta viverra diam, non pellentesque odio scelerisque id. Vestibulum mollis nibh ut tellus pretium auctor. 
 
     Aliquam erat volutpat. In sit amet nibh lobortis, maximus arcu eget, accumsan mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non dolor sed dolor aliquet suscipit ut at quam. Ut dictum tellus in 
 
     dui consectetur, eu egestas lacus sodales. Duis a luctus tellus, at efficitur magna. Quisque eleifend risus sit amet ipsum rhoncus egestas. In mauris lorem, ullamcorper quis laoreet sed, tempus vitae lectus. Integer neque leo, molestie ac aliquam 
 
     id, lacinia et ligula. Pellentesque sagittis eleifend facilisis. Fusce nisl purus, elementum non urna in, egestas lacinia justo. Nunc libero dolor, vestibulum at tortor at, pellentesque vehicula mauris.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris 
 
     pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis. Donec lobortis lobortis magna, eget placerat mi tincidunt 
 
     at. Quisque eget odio mauris. Nam eu tellus vitae nisl ornare finibus. Proin et enim aliquet, iaculis quam eleifend, mollis neque. Aenean auctor accumsan fermentum. Nam eget magna vehicula, tincidunt odio ut, vehicula arcu. Nulla sit amet turpis 
 
     lacus. Sed iaculis, velit ac hendrerit imperdiet, ante lectus malesuada felis, quis tempus nibh nisl at dui. Aliquam laoreet accumsan varius. Vestibulum vel quam arcu. Praesent id semper eros, quis mollis dui. Etiam at sagittis lectus. Suspendisse 
 
     in nisi bibendum nisl scelerisque pulvinar. Maecenas nec scelerisque augue. Donec elementum consequat tempor. Sed porta viverra diam, non pellentesque odio scelerisque id. Vestibulum mollis nibh ut tellus pretium auctor. Aliquam erat volutpat. In 
 
     sit amet nibh lobortis, maximus arcu eget, accumsan mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non dolor sed dolor aliquet suscipit ut at quam. Ut dictum tellus in dui consectetur, eu egestas 
 
     lacus sodales. Duis a luctus tellus, at efficitur magna. Quisque eleifend risus sit amet ipsum rhoncus egestas. In mauris lorem, ullamcorper quis laoreet sed, tempus vitae lectus. Integer neque leo, molestie ac aliquam id, lacinia et ligula. Pellentesque 
 
     sagittis eleifend facilisis. Fusce nisl purus, elementum non urna in, egestas lacinia justo. Nunc libero dolor, vestibulum at tortor at, pellentesque vehicula mauris.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris 
 
     pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis. Donec lobortis lobortis magna, eget placerat mi tincidunt 
 
     at. Quisque eget odio mauris. Nam eu tellus vitae nisl ornare finibus. Proin et enim aliquet, iaculis quam eleifend, mollis neque. Aenean auctor accumsan fermentum. Nam eget magna vehicula, tincidunt odio ut, vehicula arcu. Nulla sit amet turpis 
 
     lacus. Sed iaculis, velit ac hendrerit imperdiet, ante lectus malesuada felis, quis tempus nibh nisl at dui. Aliquam laoreet accumsan varius. Vestibulum vel quam arcu. Praesent id semper eros, quis mollis dui. Etiam at sagittis lectus. Suspendisse 
 
     in nisi bibendum nisl scelerisque pulvinar. Maecenas nec scelerisque augue. Donec elementum consequat tempor. Sed porta viverra diam, non pellentesque odio scelerisque id. Vestibulum mollis nibh ut tellus pretium auctor. Aliquam erat volutpat. In 
 
     sit amet nibh lobortis, maximus arcu eget, accumsan mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non dolor sed dolor aliquet suscipit ut at quam. Ut dictum tellus in dui consectetur, eu egestas 
 
     lacus sodales. Duis a luctus tellus, at efficitur magna. Quisque eleifend risus sit amet ipsum rhoncus egestas. In mauris lorem, ullamcorper quis laoreet sed, tempus vitae lectus. Integer neque leo, molestie ac aliquam id, lacinia et ligula. Pellentesque 
 
     sagittis eleifend facilisis. Fusce nisl purus, elementum non urna in, egestas lacinia justo. Nunc libero dolor, vestibulum at tortor at, pellentesque vehicula mauris.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui sem, lacinia ac dictum ut, condimentum sit amet massa. Duis vel justo ac diam bibendum gravida vitae quis eros. Nam suscipit tellus in eros varius ullamcorper sed quis nulla. Mauris 
 
     pharetra justo in lectus tincidunt, quis condimentum leo faucibus. Fusce quis magna laoreet, posuere metus in, scelerisque ipsum. Suspendisse potenti. Aenean eu elit et diam pellentesque mattis.</p> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <footer>FOOTER</footer> 
 
</div>