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

129

트위터 부트 스트랩 (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/ 캔 사람이 해결하는 방법을 말해을?

css twitter-bootstrap height

— 맷 로버츠
소스

1

그래서 당신은 모든 방향으로 그 div를 늘리고 싶습니까?

— Andres Ilich

1

예, 탐색 구역 div 뒤에 남은 공간을 채우고 싶습니다

— Matt Roberts

129

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

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

JSFiddle

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

— 호렌
소스

고마워, 나중에 시도하고 다시보고합니다. 내가 그 간단한 수정을 놓쳤다는 것을 믿을 수 없다 :)

— Matt Roberts

2

고마워, 이런 종류의 작품이지만 고정 위치 인 트위터 부트 스트랩 탐색은 맵을 아래쪽으로 이동시킵니다. 아래로 스크롤해야합니다. 탐색 모음을 빼고 사용 가능한 전체 화면 공간으로 div 범위를 만드는 방법을 모르겠습니다.

— 매트 로버츠

2

box-sizing:border-box;패딩 (바디 태그)이있는 요소에서 jsfiddle.net/S3Gvf/4를 사용 하면 쉽게 해결할 수 있습니다.

— Horen

1

css3 부두가 어떻게 작동하는지 잘 모르겠지만 작동합니다 :) 대단히 감사합니다!

— 매트 로버츠

1

이 예제에서 #map은 실제로 탐색 모음 뒤에 가려져 있습니다.

— Ethereal

37

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
부트 스트랩 - 머리글과 바닥 글 사이 채우기 유체 용기
어떻게 행 스트레치 남아있는 높이를 만드는 방법

— 짐
소스

왜이 두 가지 접근 방식이 창의 나머지 맨 아래 높이를 차지하는 두 번째 컨테이너를 작성하는 데 반 직관적 인 것처럼 보입니까? 위의 주어진 공간에서 개발자가 부트 스트랩으로 원하는 것을 수행 할 수있는 유연성이 있어야합니다.

— klewis

당신은 정말로 이것이 공감할 가치가 있다고 생각합니까? "창의 나머지 바닥 높이를 차지하는 두 번째 컨테이너를 만드는 것".. 어떻게 작동하는지에 대한 예가 있습니까? 전체 포인트는 height:100%단순히 나머지 하단 높이를 소비하는 것이 아니라 뷰포트 높이의 100 %를 소비하여 세로 스크롤 막대를 만듭니다. 그렇기 때문에지도에서 허용 된 답변의 맨 아래로 범위를 지정해야합니다.

— Zim

BootStrap에 대한 이러한 양식에서 존경받는 개발자입니다. 다른 사람이 당신을 공감하지 않았습니다. 귀하의 답변 대부분이 투표로 인해 귀하의 답변에 놀랐습니다. 그 작동 방식에 대한 예가 있었으면 좋겠습니다. 아직 아무것도 찾지 못했지만 flexbox가 나머지 요소를 페이지 아래쪽으로 채우는 쉬운 방법이 있다면 좋을 것입니다. 답변을 해주셔서 감사합니다. 쉽게 구현할 수 있다고 가정합니다. :)

— klewis

1

대답에 설명 된대로 "컨테이너에 flexbox 방향 열 d-flex flex-column을 사용하고 나머지 높이를 채우려는 모든 자식 div (예 : 행)에 flex-grow-1을 사용하십시오 ..." 부모는 설명대로 100 % 높이입니다

— Zim

3

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

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

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

— 쿠마 굽타 서밋
소스

1

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

— 마메 지토
소스