HTML CSS流體布局不起作用

Question

我有這個HTML：

<div class="template">
    <div class="template-header"></div>
    <div class="template-navigation"></div>
    <div class="template-content">
        <div class="template-content-left"></div>
        <div class="template-content-middle"></div>
        <div class="template-content-right"></div>
    </div>
    <div class="template-footer"></div>
</div>

使用此CSS：

*
{
    margin: 0;
    padding: 0;
}

body, html
{
    height: 100%;   
    min-height: 100%;
}

.template
{
    height: 100%;
}

.template-header
{
    background: gray;
    height: 100px;
}

.template-navigation
{
    background: blue;
    height: 50px;
}

.template-content
{
    height: calc(100% - 200px);
}

.template-content-left
{
    float: left;
    background: black;
    height: 100%;
    width: 200px;
}

.template-content-middle
{
    background: magenta;
    height: 100%;
    float: left;
    width: calc(100% - 400px);
}

.template-content-right
{
    float: right;
    background: black;
    height: 100%;
    width: 200px;
}

.template-footer
{
    background: blue;
    height: 50px;
}

我無法獲取template-content來填充剩余的高度，也無法獲取template-content-middle來填充剩余的寬度。

必須固定以下高度：template-header template-navigation template-footer

以下必須為固定寬度：template-content-left template-content-right

尋找跨瀏覽器的解決方案。 希望盡可能避免使用javascript / jquery。

任何幫助，將不勝感激。

Answer 1

應用以下CSS將填充高度

html, body, .template-content{
 height:100%;
}

JSFiddle

您可以將頁眉，導航和頁腳的高度更改為％，然后將內容高度設置為等於（100％-其他元素的總高度，以％為單位），或使用js計算內容的高度。

對於中間的內容，您實際上不需要中間的div，只需將左右div分別浮動到left和right ，然后將容器div中的內容自動呈現在中間的可用空間中，如JSFiddle所示。

或者，您可以為容器應用position:relative ，刪除float並為左右應用display:inline-block ，然后將div左右位置相對於容器進行絕對定位，並添加padding-left和padding-right等於分別設為左div和右div的寬度，這將導致容器div中的內容出現在中間。

就像這個JSFiddle

或者，如果舊的瀏覽器兼容性不是問題，請使用css3 calc()函數並將容器的高度設置為

.template-content
{
 border: 1px solid magenta;
 height: calc(100% - 200px); 
}

對於中層

.template-content-middle
{
 float:left;
 background: magenta;
 width: calc(100% - 400px);
 height: 100%;
}

檢查這個JSFiddle

旁注：最好使用background來測試布局，而不是使用border因為邊框會破壞正常渲染中的計算。如果要避免這種情況，請研究一個全新的主題： CSS Flexbox

Answer 2

<pre><code>.template-content
{
border: 1px solid magenta;
overflow:auto;
}