Twitter 부트 스트랩 : 100 % 높이의 컨테이너에있는 div

트위터 부트 스트랩 (2)을 사용하면 간단한 페이지에 탐색 표시 줄이 있고 container 안에 100 % 높이의 div를 추가하고 싶습니다. 화면). 내 CSS-Fu는 녹슬지 않아서 해결할 수 없다.Twitter 부트 스트랩 : 100 % 높이의 컨테이너에있는 div

간단한 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%; 
}

편집 할 수 있습니다. 그러나 문제는 맨 위에 고정 된 navbar를 설명하기 위해 바디에 패딩 윗부분을 추가한다는 것입니다. 이것은 "지도"div의 100 % 높이에 영향을 주며 스크롤바가 추가되는 것을 의미합니다 - 여기 보이는 것처럼 : http://jsfiddle.net/S3Gvf/2/ 수정 방법을 알려 줄 수 있습니까?

출처

2012-07-26 Matt Roberts

그럼 모든 방향으로 div를 늘리시겠습니까? –

예, nav div 다음에 남은 공간을 채우고 싶습니다. –

설정 클래스 .fillheight: 100%

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

JSFiddle

에 당신이 패딩을 추가 할 필요가

출처

2012-07-26 21:07:16 Horen

감사합니다. 나중에 다시 시도하고 다시 신고 해 드리겠습니다. 내가 그 간단한 수정을 놓쳤다는 것을 믿을 수 없다. –

고마워, 이런 종류의 작동하지만, 고정 위치 인 트위터 부트 스트랩 nav은지도가 맨 아래로 가도록한다 - 맨 아래로 스크롤해야한다. 나는 nav bar를 사용 가능한 전체 화면 공간 MIN으로 나누는 방법을 모릅니다. –

navsbar를 jsfidlle에 추가하여 문제를 볼 수 있습니까? – Horen

(그래서 당신이 100 % 높이를 차지 볼 수 있습니다 #map의 빨간색 배경을 넣어) 상자를 채우는 것 : border-box - 여기에 샘플 bootply

출처

2015-08-17 13:34:33 mamezito

Twitter 부트 스트랩 : 100 % 높이의 컨테이너에있는 div

답변

관련 문제