引導程序3，不帶卷軸的全高容器

我想製作帶有標題，粘性頁腳和2個流體容器的引導程序佈局。其中一個是固定的高度，另一個必須採取所有剩餘的高度。引導程序3，不帶卷軸的全高容器

目前我試圖通過爲第二個容器設置高度爲100％來完成此操作，但不幸的是它將滾動添加到窗口。我怎樣才能讓容器2填充可用的高度，所以它不會將滾動添加到窗口。

<div id="app" class="height100"> 
    <div class="height100"> 
<div class="navbar navbar-default"> 
    NAVBAR 
</div> 
<div class="container-fluid container1"> 
    CONTAINER 1 
</div> 
<div class="container-fluid container2"> 
    CONTAINER 2 
</div> 
<div class="footer"> 
    FOOTER 
</div>

html, 
body, 
.height100 { 
    height: 100%; 
} 

.navbar { 
    margin-bottom: 0px; 
    background-color: red; 
} 

.container1 { 
    background-color: yellow; 
    height: 105px; 
} 

.container2 { 
    background-color: green; 
    height: 100%; 
} 

.footer { 
    bottom: 0; 
    background-color: white; 
    border-top: #ddd 1px solid; 
    padding-top: 5px; 
    position: fixed; 
    left: 0; 
    right: 0; 
    -webkit-transform: translateZ(0); 
}

FIDDLE

謝謝。

來源

2016-08-01 shkipper

設置爲隱藏。
CSS

.height100 
    { 
    height: 100%; 
overflow:hidden; 
}

https://jsfiddle.net/no83psx3/4/

來源

2016-08-01 13:03:29 Abhishek

THX答覆。但是這並沒有改變container2的高度，我需要的是填充可用的高度，而不隱藏滾動條，所以我可以稍後在js中使用container2高度。 – shkipper

嘗試給予，div與類height100 100高度的高度 – Abhishek

它使用最小高度：calc（100vh - 155px）; – shkipper

引導程序3，不帶卷軸的全高容器

回答

相關問題