WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:ヘッダー、フッターの画面レイアウト

0:[投稿] ぱんだ [2003/03/23 14:40 ][環境:IE6,windows98,NT,2000 Servlet,JSP,STRUTS]

以下のようなレイアウトをフレームを使わないで実現したいんですが
その方法がわからずに、はまり続けています。
<SPAN style="position:absolute; top:○%; bottom:△%"> のような方法で
出来るとは思ったのですが、まだ実現できません。
アドバイスがありましたらお願いします。

レイアウト

---------------------------------------------------
|         ヘッダー部分                               |
---------------------------------------------------
|                                                   |
|                                                  |
|                                                  |
|          メイン表示部                             |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
---------------------------------------------------
|    フッター部分                               |
---------------------------------------------------

ヘッダーはブラウザの大きさにかかわらず、常に一番上
フッターはブラウザの大きさにかかわらず、常に一番下


1:[質問] ぱんだ [2003/03/23 14:42 ]

うわ。表示乱れちゃってますね・・・
すみません。。。右に飛び出ている部分は無視してください。


2:[回答] 平野 敬 [MAIL] [URL] [2003/03/23 16:58 ]

MacIE5以上, Netscape6以上, Mozillaのみですが。
(工夫次第でWindowsIEでもそこそこ見られるようにはなります)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            backgrond:#fff;
            color:#000;
        }
        #header,#footer{
            width:100%;
            margin:0;
            padding:0;
            background:#000;
            color:#fff;
            position:fixed;
        }
        #header {
            top:0;
            left:0;
        }
        #footer {
            bottom:0;
            left:0;
        }
    </style>
    <title>テスト</title>
</head>

<body>

<div id="header">
    <p>あれこれ</p>
</div>

<div id="main">
    <p>あれこれ</p>
    <p>あれこれ</p>
    <p>あれこれ</p>
    <p>あれこれ</p>
    <p>あれこれ</p>
    <p>あれこれ</p>
</div>

<div id="footer">
    <p>あれこれ</p>
</div>

</body>

</html>


3:[回答] きみまろ [2003/03/23 17:40 ]

なんとなく別パターン
WindowsXP IE6(互換モード),NC7,Opera7でよさそう。他はわからん

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>フレーム風?</title>
<style type="text/css">
body {
    padding:0;
    margin:0;
    overflow:hidden;
}
div {
    position:absolute;
    left:0;
    width:100%;
    overflow:auto;
}
.header {
    top:0;height:10%;
}
.main {
    top:10%;
    height:80%;
    background-color:#ccc; /*確認用*/
}
.footer {
    top:90%;height:10%;
    /* bottom:0; でもいいかも*/
}
</style>

</head>
<body>

<div class="header">
<h1>ヘッダー</h1>
</div>

<div class="main">
<p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p>
<p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p>
<p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p><p>メイン</p>
</div>

<div class="footer">
<address>フッター</address>
</div>

</body>
</html>


4:[質問] ぱんだ [2003/03/23 17:43 ]

平野様、ご回答ありがとうございます。
上記のソースをNetscape6.1で見たところ、フッターがなくなってしまいました。
パラメータを変えて試してみましたが、ヘッダー、フッターがうまく画面内に収まってくれません。
今回は、WinIE6.0以上がターゲットなので、またいろいろ試してみたいと思います。

なにか心当たりがありましたら、またよろしくお願い致します。


5:[完了] ぱんだ [2003/03/23 21:05 ]

きみまろ様、ありがとうございます!
なんとか吸収できました!

当方では、

ヘッダー
.header{
 position:relative;
 height:8%;
 width:100%
}

ボディ
.body{
 position:relative;
 height:85%;
 width:100%
}

フッター
.body{
 position:relative;
 height:7%;
 width:100%
}

で解決しました!

お二方お世話になりました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World