如何为HTML中的不同div分配修复百分比高度？

假设我有一个标题div，一个内容div和一个页脚div。如何为HTML中的不同div分配修复百分比高度？

<div id="header"> 
    Title 
</div> 
<div id="content" style="background:red"> 
     <p>TEST</p> 
</div> 
<div id="footer"> 
    footer 
</div>

我怎么能总是设置标题格为20％，含量为70％，股利和页脚为10％？

感谢

来源

2013-02-10 Kintarō

你说的宽度，但你的元素堆叠。你的意思是身高吗？ – Axel 2013-02-10 02:09:59

对不起，我的意思是身高。 – 2013-02-10 02:11:31

Working example on JS Bin。

HTML：

<!DOCTYPE html> 
    <body> 
    <div class="container"> 
     <div id="header" style="background:blue"> 
     Title 
     </div> 
     <div id="content" style="background:red"> 
     <p>TEST</p> 
     </div> 
     <div id="footer" style="background:gray"> 
     footer 
     </div> 
    </div> 
    </body> 
</html>

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

html, 
body, 
.container { 
    height: 100%; 
} 

#header { 
    height: 20%; 
} 

#content { 
    height: 70%; 
} 

#footer { 
    height: 10%; 
}

来源

2013-02-10 02:15:31

+1容器div可能是最优雅的方式 – 2013-02-10 02:46:56

你可以用绝对定位做到这一点：

#header { 
    position: absolute; 
    top: 0; 
    height: 20%; 
    left: 0; 
    width: 100%; 
} 

#content { 
    position: absolute; 
    top: 20%; 
    height: 70%; 
    left: 0; 
    width: 100%; 
} 

#footer { 
    position: absolute; 
    top: 90%; 
    height: 10%; 
    left: 0; 
    width: 100%; 
}

见JSFiddle snippet它在行动。

来源

2013-02-10 02:12:54 cdmckay

试试这个：http://jsfiddle.net/9gHY4/2/

#header { 
    position: absolute; 
    height: 20%; 
    width: 100%; 
    top: 0; 
    background-color: blue; 
} 
#content { 
    position: absolute; 
    top: 20%; 
    height: 70%; 
    width: 100%; 
    background-color: red; 
} 
#footer { 
    bottom: 0; 
    position: absolute; 
    height: 10%; 
    width: 100%; 
    background-color: green; 
}

来源

2013-02-10 02:33:33

如何为HTML中的不同div分配修复百分比高度？

回答

相关问题