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 填充剩余的宽度。

以下必须是固定高度： 模板头 模板导航 模板页脚

以下必须是固定宽度： 模板内容左 模板内容权利

寻找跨浏览器的解决方案。如果可能，希望避免使用 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和@ 987654333@分别等于左右div的宽度，会导致容器div中的内容出现在中间。

就像这个JSFiddle

或者如果古代浏览器兼容性不是问题，使用css3 calc()函数并将容器高度设置为

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

对于中间的div

.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;
}