Füllhöhe mit Flexbox in einem Container

Question

Ich entwickle ein Intranet und möchte den Inhalt vertikal und horizontal zentriert haben.

Ich habe eine Webseite wie folgt aus:

<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>

Inhalt wird das zweite Kind von body in einem div mit container oder container-fluid durch einen Titel mit einem Drop-Down-Menü angebracht gefolgt immer auf ein Knopf.

Wichtig zu wissen, meine Fußzeile ist statisch und seine Höhe beträgt 60px.

Ich versuche, eine Flexbox in meinem zweiten Container, nach dem Titel Teil, die alle verbleibenden Höhe füllen. Auf diese Weise würde nur der reine Inhalt zentriert werden.

Leider komme ich nicht zu diesem Punkt.

Ich habe versucht, meinen Körper als Flexbox zu setzen und alle seine Kinder manuell einzustellen: Meine Fußzeile würde jedes Mal das Ende meiner Seite verbergen.

Ich habe versucht, eine einzelne Flexbox auf die einfachste Weise zu setzen, sie würde die fehlende Höhe nicht füllen.

html & body bekam min-height: 100%;. align-items & justify-content wurden gesetzt.

Auch wenn ich html auf height:100%; setze, würde es die Bildlaufleiste jedes Mal zeigen, aber dann würde die einzelne flexbox die volle fehlende Höhe bekommen, aber nicht zentriert bekommen (und immer noch dieses Fußzeilenproblem).

ich etwas oder hat wahrscheinlich falsch, einen Trick verpasst ...

Vielen Dank für jede Art von Hilfe!

Answer 1

Danke @RicardoRuiz für die Antwort.

Es sieht schließlich wie das folgende Snippet aus.

* { 
 
    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>