1つのhtmlでフレームのような動きをさせるには

解決済

質問者：take_july
質問日時：2009/05/12 17:19
回答数：6件

いつもお世話になっております。
フレームについて質問させてください。

<frame name="header" src="header.html" title="メニュー" scrolling="no">
<frame name="main" src="main.html" title="コンテンツ" scrolling="auto">

現在、上記のようにフレーム分けを行い、ヘッダー（メニュー）部分は固定にして、メイン（コンテンツ）部分のみスクロールするようにしているのですが、これをフレーム分けせず、１枚のhtmlで同じように行う事は出来るのでしょうか。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2009/05/12 17:32

iframeをつかうとか？

そうでないならたとえばこんな感じ。
<head>
<style>
#header{
background-Color:red;
}
#main{
height:80%;
background-Color:yellow;
overflow-y:scroll;
}
</style>
</head>
<body>
<div id="header">
メニュー
</div>
<div id="main">
test 
test 
test 
test 
test</div>
</body>

この回答への補足

サンプルまで表示して頂き、ありがとうございます。
色々試してみたのですが、解決できない事がありますので、
質問させてください。

提示頂いたサンプルを下記のように少し変更してみたのですが、
画面サイズを小さくしてみた所、一番下の
"見えなくなる"という行が下にスクロールしても見えなくなってしまいました。

フレームで分けた場合は大丈夫だったのですが、
こちらなんとかする方法はありますでしょうか。
よろしくお願いします。

<head>
<style>
#header{
background-Color:red;
}
#main{
height:80%;
background-Color:yellow;
overflow-y:scroll;
}
</style>
</head>

<body scroll="no">
<div id="header">
メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 メニュー6 メニュー7 
</div>
<div id="main">
test 
test 
test 
test 
見えなくなる
</div>

</body>

補足日時：2009/05/13 21:35

通報する

- 0
- 件

通報する

No.6

回答者： askaaska
回答日時：2009/05/13 18:53

> 全く同じ風にする事

スタイルシートや
必要なら画像を使って
がりがり作り込むしかないわね。

この回答への補足

ご回答いただき有難うございます。

下にも記入させて頂きましたが、

下のｈｔｍｌを画面サイズを小さくしてみた所、一番下の
"見えなくなる"という行が下にスクロールしても見えなくなってしまいました。

フレームで分けた場合は大丈夫だったのですが、
こちらなんとかする方法はありますでしょうか。
よろしくお願いします。

<head>
<style>
#header{
background-Color:red;
}
#main{
height:80%;
background-Color:yellow;
overflow-y:scroll;
}
</style>
</head>

<body scroll="no">
<div id="header">
メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 メニュー6 メニュー7 
</div>
<div id="main">
test 
test 
test 
test 
見えなくなる
</div>

</body>

補足日時：2009/05/14 13:24

通報する

- 0
- 件

通報する

No.5

回答者： noname#144864
回答日時：2009/05/13 08:43

#4 です。

ごめんなさい、
>div#menu {......top : 15em ; .....}
は、div#menu {......top : 7em ; .....}です。数字を間違えました。

- 0
- 件

通報する

No.4

回答者： noname#144864
回答日時：2009/05/12 23:15

こんばんは。

所謂、スクロールしてもメニューの部分だけ固定させたいと言うことですね。
それならば、固定したいメニューに position 要素を使い、値を fixed にします。

CSS の一例
簡単に、メニューを左上にして固定させてみましょう。
位置は左に 2em トップ 7em メニュー枠の色は teal メニュー幅は 10 em 他
body {margin : 1em 5em 2em 14em ;}
div#menu {position : absolute ; left : 2em ; top : 15em ;
width : 10em ; border : dotted 2px teal ; float : left ;}
body > div#menu {position : fixed ; }

position : fixed ; は Windows 版 IE 6 まで対応していません。
Windows 版 IE 7 ～及び Mac 版 IE 5.x , Firefox や Opera ,
Safari , SeaMonky , Shiira など私が確認したブラウザでは対応しています。

上記のことを踏まえて Windows IE 6 まではスクロールしてしまうメニューにして、
position : fixed ; に対応しているブラウザにはメニューを固定しよう、
と言うことで、
div#menu {position : absolute ; .......} にして、
body > div#menu {position : fixed ; }
を使いました。
これは、 Windows IE 6 までは子供セレクターに対応していないことを利用しています。
(子供セレクターについては、ご存じですよね)

では html の一例
リストの <ul> を使って、メニューを作ります。
文書型宣言や <body> <html> 等は省略

<h1>メニューを固定するページを作る</h1>
<div id="menu">
<ul>
<li><a href="menu01.html" title="メニュー１">メニュー１</a></li>
<li><a href="menu02.html" title="メニュー２">メニュー２</a></li>
<li><a href="menu03.html" title="メニュー３">メニュー３</a></li>
........
</ul>
</div>
このテキストは、メニューの右側に表示されます。
ここに、好きなコンテンツを書いてみましょう。

もしこの要素をお使いになるのならば、Windows 版 IE 6 までは
対応していない、と言うことを念頭に置いてください。

- 0
- 件

通報する

No.2

回答者： okg00
回答日時：2009/05/12 17:27

http://himajin.moo.jp/menu/menu5.html
http://himajin.moo.jp/menu/menu3.html

- 0
- 件

通報する

No.1

回答者： askaaska
回答日時：2009/05/12 17:27

<div id="header">

header.htmlの内容
</div>
<div id="main">
main.htmlの内容
</div>

としてheaderとmainにそれぞれ
overflow:none、overflow:scroll
をスタイルシートとして設定するといいわ。
もちろん、widthとheightも忘れずにね。