컨테이너 내부에 플렉스 박스로 높이 넣기

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와 사업부 내부 body의 두 번째 아이가 될 것입니다 :

나는이 같은 웹 사이트가 단추.

알아 두어야 할 사항은 내 바닥 글이 고정되어 있으며 높이가 60px입니다.

나머지 두 개의 높이를 모두 차지하는 제목 부분 이후에 제 2 컨테이너 안에 플렉스 박스를 넣으려고합니다. 이렇게하면 순수한 콘텐츠 만 중앙에 배치됩니다.

불행히도, 나는이 시점에 도달 할 수 없습니다.

내 몸을 플렉스 박스로 설정하고 수동으로 모든 자녀를 설정하려고했습니다. 내 바닥 글은 매번 내 페이지의 끝을 숨길 것입니다.

가능한 한 가장 쉬운 방법으로 단일 플렉스 박스를 설정하려고 시도했지만 누락 된 높이를 채울 수 없었습니다.

html & body은 min-height: 100%;입니다. align-items & justify-content이 설정되었습니다.

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>