0

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

页眉垂直占据页面的前 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 在这里发表评论

4

4 回答 4

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>
于 2013-10-10T03:37:17.747 回答
0

你的计算有点出 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;
}

演示小提琴

于 2013-10-10T03:44:28.597 回答
0 
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

于 2013-10-10T03:36:15.783 回答
0

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

演示

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;
}
于 2013-10-10T03:58:53.977 回答