[css] 트위터 부트 스트랩 : 높이가 100 % 인 컨테이너의 div

Program / 글쓴이

트위터 부트 스트랩 (2)을 사용하면 탐색 모음이있는 간단한 페이지가 있고 내부에는 container100 % 높이의 div를 추가하려고합니다 (화면 하단). 내 css-fu는 녹슨 상태이며이 문제를 해결할 수 없습니다.

간단한 HTML :

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

현재 CSS :

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill {
    min-height: 100%;
}
  • 편집하다 *

아래 제안 된대로 채우기 클래스에 높이를 추가했습니다. 그러나 문제는 상단에 고정 된 탐색 막대를 설명하기 위해 본문에 패딩 탑을 추가한다는 것입니다. 여기 바와 같이 -이 스크롤이 추가됩니다있는 “지도”DIV 수단의 100 % 높이에 영향을 http://jsfiddle.net/S3Gvf/2/ 캔 사람이 해결하는 방법을 말해을?

답변

수업 .fill을로 설정height: 100%

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

JSFiddle

(빨간색 배경을 넣었 #map으므로 100 % 높이를 차지합니다.)

답변

2019 업데이트

에서는 부트 스트랩 4 , 인 flexbox는 얻을 수있다 전체 잔여 공간을 채우는 높이 레이아웃.

우선, 컨테이너 (부모) 는 전체 높이 여야합니다.

옵션 1_에 대한 클래스를 추가하십시오 min-height: 100%;. 부모가 키가 정의 된 경우 에만 최소 높이가 작동합니다.

html, body {
  height: 100%;
}

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

https://www.codeply.com/go/dTaVyMah1U

옵션 2_ 사용 vh단위 :

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

https://www.codeply.com/go/kMahVdZyGj

그런 다음, 사용 인 flexbox 방향 열 d-flex flex-column컨테이너에, 그리고 flex-grow-1어떤에 자식 div의 (예 : row) 당신이 남아있는 높이를 채우려는 것이다.

참조 :
부트 스트랩 4 Navbar의 및 콘텐츠 채우기 높이 인 flexbox
부트 스트랩 – 머리글과 바닥 글 사이 채우기 유체 용기
어떻게 행 스트레치 남아있는 높이를 만드는 방법

답변

매우 간단합니다. 당신이 사용할 수있는

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

요구 사항에 따라 높이를 변경할 수 있습니다.

답변

여기 샘플 – 경계 – 상자 : 당신은 “채우기”요소에 패딩 탑을 추가, 플러스 박스 크기를 추가 할 필요가 bootply

답변