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和padding-right分别等于左右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;
}

Html Css流体布局不起作用

2 个答案: