如何使div填充剩餘的垂直空間？

我在頁面中有兩個主要部分1）Topbar 2）容器。頂欄具有50px的固定高度，容器應具有剩餘高度。如何使div填充剩餘的垂直空間？

我嘗試給容器高度爲100％，但它不能正常工作，因爲它使網頁採取100％+ 50px。因此，我正在嘗試避免使用垂直滾動條。

這是一個演示我的問題的小提琴。請使用全屏視圖http://www.bootply.com/ov2s9oOVku

我該如何解決這個問題？

更新1

我想張貼在這裏發表https://stackoverflow.com/a/24979148/5936814但由於某種原因它不是爲我工作的解決方案。請看這個小提琴http://www.bootply.com/9iyQJ7Trw2。

2016-11-17 Flying Gambit

的可能的複製[製作一個div填充剩餘的屏幕空間的高度]（http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-rem aining-screen-space） –

@JamesDonnelly不工作http://www.bootply.com/9iyQJ7Trw2 –

Btw對於其他尋找解決方案的人來說，使用flex是一個很好的解決方法。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

一種不同的方法是使用display: flex

html, body{ 
 
\t height:100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
} 
 
.topbar { 
 
    flex: 0 1 auto; 
 
    height: 50px; 
 
} 
 
.container-fluid { 
 
    flex: 1 1 auto; 
 
}

<div class="wrapper"> 
 
    <div class="topbar" style="border: 2px solid red;"></div> 
 

 
    <div class="container-fluid" style="border: 2px solid black;"> 
 
    <div class="row-fluid" style="border: 2px solid green;"> 
 
     <div class="col-lg-12"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-17 11:56:03 SimplePixels

沒有它與引導程序不工作。看到這個http://www.bootply.com/CGxJfn8paU –

爲了使我先前的評論清楚，它採取充分可用的垂直空間，但它也弄亂了寬度，這不是全寬度。 –

爲了使它完全按預期工作，可能必須重寫'.container-fluid'的'margin'。否則，它將不會跨越整個寬度，因爲它會默認進行。 –

您可以使用height：calc（100vh - 50px）;

其中50px是頂欄的高度，100Vh是視高的100％。

的viewheight（VH）和viewwidth（VW），屬性是相當驚人的

<div style="border: 2px solid red; height:50px"></div> 

<div class="container-fluid" style="border: 2px solid black; height:calc(100vh - 50px);"> 

    <div class="row-fluid" style="border: 2px solid green; height:100%"> 
    <div class="col-lg-12"></div> 
    </div> 
</div>

來源

2016-11-17 11:13:51 SimplePixels

這將需要我對所有我想避免的固定項目進行檢查。 –

是的，我做了一個不同的例子（請參閱答案2） – SimplePixels

如何使div填充剩餘的垂直空間？

回答

相關問題