4

ページ全体がウィンドウのサイズになるように（つまり、ページがスクロールしないように）3つのdivを作成し、各divの高さが全体の高さの数パーセントになるようにします。例えば

|--------------------------------------|
|      Body height=window's height     |
| |----------------------------------| |
| |        Header height:10%         | |
| |----------------------------------| |
| |                                  | |
| |        Content height:85%        | |
| |                                  | |
| |                                  | |
| |----------------------------------| |
| |        Footer height:5 %         | |
| |----------------------------------| |
|--------------------------------------|

ここに私が成功せずに使用したコードがあります

<body style="width: 100%; height:100%">
<div style="width: 100%; height:100%;">
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
        <!-- some content -->
    </div>
    <div style="width: 100%; height:85%;"   >
        <!-- some content -->
    </div>
    <div style="width: 100%; height:5%"  >
        <!-- some content -->
    </div>
</div>
</body>
4

2 に答える 2

0

高さの値を PX に変更してみてください。

<body style="width: 100%; height:100%">
<div style="width: 100%; height:1000px;">
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
        <!-- some content -->
    </div>
    <div style="width: 100%; height:85%;"   >
        <!-- some content -->
    </div>
    <div style="width: 100%; height:5%"  >
        <!-- some content -->
    </div>
</div>
</body>
于 2013-05-07T08:16:31.683 に答える