コンテナ内のフレックスボックスで高さを塗る

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>

コンテンツは常に上のドロップダウンメニューを添付し、タイトルに続くcontainerまたはcontainer-fluidとdivの内側にbodyの第二子になりますボタン。

私のフッターは静的で、その高さは60pxです。

残りの高さのすべてを埋めるタイトル部分の後に、私の2番目のコンテナの中でフレックスボックスを取得しようとしています。この方法では、純粋なコンテンツのみが中央に配置されます。

残念ながら、私はこの点に到達できません。

私はフレックスボックスとして自分の体を設定し、すべての子供を手動で設定しようとしました。私のフッタは毎回私のページの終わりを隠すでしょう。

私はできるだけ簡単な方法で単一のフレックスボックスを設定しようとしましたが、欠けている高さを埋めることはありませんでした。

html & bodyはmin-height: 100%;です。 align-items & justify-contentを設定した。

また、htmlをheight:100%;に設定すると、毎回スクロールバーが表示されますが、1つのフレックスボックスには完全な欠けている高さがありますが、中央に来ることはありません（まだこのフッターの問題があります）。

私はおそらく何かを逃したか、間違ったトリックをした...ヘルプのあらゆる種類の

ありがとう！

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>