---更新：我忘了检查+整体结构

Question

我正在尝试制作网页布局。

标题垂直占据页面的前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">
    &nbsp;
    <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>&nbsp;</td>
        </tr>

        <tr>
            <td colspan="3">&copy;2013
            </td>
        </tr>
    </table>
</div>

</body>

哦，顺便说一句：我正在使用Chrome。

---更新：问题解决了......感谢3dgoo在这里评论

Answer 1

http://jsfiddle.net/aWkzB/

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

Answer 2

html, body {
    display:block;
    height:100%;
    margin: 0 auto;
}
#header {
    display:block;
    height:20%;
    width:100%;
    background-color:red;
}
#main {
    display:block;
    height:65%;
    width:100%;
    background-color:#DCDCDC;
}
#footer {
    display:block;
    height:15%;
    width:100%;
    background-color:green;
}

jsFiddle

Answer 3

你的计算有点超过100（20 + 75 + 15 = 110）

html, body {
height: 100%;
width:100%;
margin:0px;
padding:0px;
}
#header {
height: 15%;
background-color: yellow;
}
#main {
height: 70%;
background-color: green;
}
#footer {
height: 15%;
background-color: red;
}

Demo Fiddle

Answer 4

你可以试试这个。这是一种不同的方法，但它基本上是一样的。

DEMO

body {
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.header {
    background-color: #63D563;
    position: absolute;
    top: 0;
    bottom: 85%; /*15% header*/
    left: 0;
    right: 0;
}

.main-content {
    background-color: #626262;
    position: absolute;
    top: 15%;
    bottom: 15%; /*70% content*/
    left: 0;
    right: 0;
}

.footer {
    background-color: #63BCD5;
    position: absolute;
    top: 85%;
    bottom: 0; /*15% footer*/
    left: 0;
    right: 0;
}

安排三个div

---更新：我忘了检查+整体结构

---更新：问题解决了......感谢3dgoo在这里评论

4 个答案:

DEMO