0

Webページのレイアウトを作成しようとしています。

ヘッダーは、垂直方向にページの最初の 15% を占めます。本体部分は真ん中の70％を占めています。フッターは最後の 15% を占めます。

これが私の3つの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

これを試すことができます。やり方は違いますが、やっていることは基本的に同じです。

デモ

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 に答える
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 に答える