100％的高度佈局無法正確顯示

Question

我與這一點，而掙扎。

我希望如下創建佈局看起來：

+-------------+ 
| Header | 
+-------------+ 
| box1 | box2 | 
+-------------+ 

當應該是窗口高度的60％百分比的頭，和2盒高度恰好是頁面的其餘部分40％ 。

現在，縮放或更改分辨率時，將盒子應該100％的寬度並且都爲他們的內容足夠的高度。

我目前使用bootsrap，並執行以下操作：

#header { 
    margin : 0 !important; 
    overflow: hidden; 
    height : 60vh; 
    width : 100%; 
} 

.jumbotron{ 
    margin : 0px !important; 
    padding : 0px !important; 
} 
#footer{ 
    width : 100%; 
    margin : 0 !important; 
    padding : 0 !important; 
    border:1px solid red; 
    min-height : 40%; 
    max-height:100%; 

} 

#main-content{ 
    height :100%; 
} 
html,body{ 
    height : 100%; 
} 

#boxes-wrap{ 
    width : 100% !important; 
    margin : 0 !important; 
    border : 1px solid blue; 
    height : 100%; 
} 
.box{ 
    height : 100%; 
    text-align : center; 
    padding  : 20px; 
} 

現在發生的事情是，這些箱子不填滿所有的空間，並有頁面的底部與箱之間的這種醜陋的間距（頁腳）。

但是，當我使用這個：

#footer{ 
    width : 100%; 
    margin : 0 !important; 
    padding : 0 !important; 
    border:1px solid red; 
    min-height : 40vh; 
    max-height:100%; 

} 

初始狀態看起來不錯，但改變分辨率當一些的盒子中的內容出去箱邊界的。

我該如何解決這個問題？我怎樣才能使這個佈局填充所有的頁面，並使其響應？

的jsfiddle：https://jsfiddle.net/yxef2huw/1/

Answer 1

Check this fiddle

我已經改變了：這些類

.jumbotron{ 
     margin : 0px !important; 
     padding : 0px !important; 
     height:60% 
    } 

#footer{ 
    width : 100%; 
    margin : 0 !important; 
    padding : 0 !important; 
    border:1px solid red; 
    height : 40%; 
    max-height:100%; 
    max-width:100%; 

} 
.box:first-child{ 
    background : red; 
    float:left; 
    width:50% 
} 

.box:last-child{ 
    background : blue; 
    float:left; 
    width:50% 
} 

希望這有助於:)