HTML教程流动布局不工作

我有这个网站：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。

任何帮助，将不胜感激。

来源

2014-04-05 c0D3l0g1c

'高度：如果父母的身高为100％（这适用于相对和静态），那么父母具有100％的身份，如果父母的身体/ html标记必须具有100％，那么100％适用。所以在你的情况下，这不会是一个好主意，所以你应该使用javascript并计算高度以应用它。 – drip

我确实有HTML，身高设置为100％。 – c0D3l0g1c

应用下面的CSS将填充高度

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

JSFiddle

您可以改变首部，资产净值和页脚％的高度和与设定的内容的高度等于（100％ - 以％为单位的其他元素的总高度）或使用js来计算内容的高度。

对于中间内容，您实际上并不需要中间div，只需将左右div分别浮动到left和right，则容器div中的内容将自动呈现在中间可用空间中在本JSFiddle

或者你可以申请position:relative的容器，取出float并申请display:inline-block左，右，然后左绝对定位和右格设置适当地相对于容器，并添加padding-left和padding-right等于左右div的宽度，这会导致container div中的内容出现在middl中即

在本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

来源

2014-04-05 07:55:32

将.template-content的高度设置为100％会导致.template上的溢出。 – c0D3l0g1c

@ c0D3l0g1c我提到了设置其他元素的高度，并将内容高度设置为100％ - 它们的总高度以％表示。 –

我想为页眉，导航和页脚固定高度。并为模板内容左侧和模板内容右侧固定宽度。这样它在任何决议中都看起来一致。用你的建议关于背景...好多了！ – c0D3l0g1c

-3

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

来源

2014-04-05 08:22:29 Narayana

HTML教程流动布局不工作

回答

相关问题