我正在尝试对网页进行布局。
页眉垂直占据页面的前15％。
身体部位在中间占70％。
页脚占最后15％。
这是我的三个div的基本布局：
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
如何在CSS中做到这一点？
输出应类似于HTML4中的：
<frameset rows="15%, 75%, *">
<frame />
<frame />
<frame />
</frameset>
---更新：我忘了在+整个结构之前检查参数
好吧：我想我应该在此处复制并粘贴整个结构。你们提供给我的人很棒，但是他们没有解决
<body>
<div id ="nav-header">
<ul class="nobullet">
<li><a href="">Exhibit</a></li>
<li><a href="">Class</a></li>
<li><a href="">Faculty</a></li>
<li><a href="">Enterprises</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<div id="main-container">
<div id="extended"></div>
</div>
<div id="footer">
<table id="info" bordercolor="black" rules="all">
<tr>
<td colspan="3">You're here: <div id="where"></div></td>
</tr>
<tr>
<td><ul class="nobullet">
<li><a href="">Intro</a></li>
<li><a href="">Hire</a></li>
<li><a href="">Collaboration</a></li>
<li><a href="">Thanks</a></li>
</ul></td>
<td><ul class="nobullet">
<li><a=href=""><img src="" alt=""></a></li>
<li><a=href=""><img src="" alt=""></a></li>
<li><a=href=""><img src="" alt=""></a></li>
</ul></td>
<td> </td>
</tr>
<tr>
<td colspan="3">©2013
</td>
</tr>
</table>
</div>
</body>
哦，顺便说一句：我正在使用Chrome。
---更新：问题解决了……感谢3dgoo在这里发表评论
最佳答案
<style>
html, body {
height: 100%;
}
#header { height: 20%; background-color: blue; }
#main { height: 75%; background-color: red; }
#footer { height: 5%; background-color: green; }
</style>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
关于html - 安排三个div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19286605/