트위터 부트 스트랩 (2)을 사용하면 탐색 모음이있는 간단한 페이지가 있고 내부에는 container
100 % 높이의 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%;
}
(빨간색 배경을 넣었 #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;
}
요구 사항에 따라 높이를 변경할 수 있습니다.