twitter 부트스트랩(2)을 사용하여 네비게이션바가 있는 간단한 페이지를 가지고 있으며, 컨테이너 안쪽에 높이 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%;
}
아래 제안과 같이 채우기 클래스에 높이를 추가했습니다. 단, 상단의 고정 네비게이션 바를 고려하여 본체에 패딩 탑을 추가하는 것이 문제입니다. 이것은 "map"div의 100% 높이에 영향을 미치며 스크롤바가 추가됨을 의미합니다.
수정 방법을 알려주시겠습니까?업데이트 2019
Bootstrap 4에서는 플렉스박스를 사용하여 나머지 공간을 채우는 *풀 하이트 레이아웃을 얻을 수 있습니다.
먼저 컨테이너 (부모)는 풀 하이트여야 합니다.
옵션 1_ '최소 높이: 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
그런 다음 컨테이너에 플렉스박스 방향 열 'd-flex flex-column'을 사용하고 나머지 높이를 채우는 childdiv ('row')에는 'flex-grow-1'을 사용합니다.
참고 항목:
https://stackoverflow.com/questions/49191957
https://stackoverflow.com/questions/15641142/
https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height/42195475#42195475