ヘッダー・フッター固定HTMLに関して

質問・疑問に答えるQ&AサイトOKWave

OKWave

[ 詳しく ]

FAQ（よくある質問）

法人向けサービス

質問する

○○だけど・・・？

回答受付中の質問

Check

印刷

<< 前の質問 | 次の質問 >>

ヘッダー・フッター固定HTMLに関して

ヘッダー・フッター固定HTMLに関して

ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。

そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。
ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。
「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、
「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。

【HTML】
～～～～～～～～
<div id="head">～ヘッダー～</div>
<div id="flashcontents">～Flashデータ～</div>
<div id="foot">～フッター～</div>
～～～～～～～～

【CSS】
～～～～～～～～
html,body {margin:0;　padding:0;　overflow:hidden;}
#head{～サイズなどを指定～}
#flashcontents{margin: 0;　height: 100%;　width: 100%;}
body > #flashcontents {height:100％;　position: absolute;}
#contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…}
～～～～～～～～

以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？
よろしくお願い致します。

投稿日時 - 2011-06-16 16:47:42

連想キーワード：

通報する

回答する

QNo.6813906

happy_sunny7

すぐに回答ほしいです

ブックマーク

はい

1人が「このQ&Aが役に立った」と投票しています

[ 前へ | 次へ ]

回答（1件中　1～1件目)

ANo.1

sora1tora2

こんにちは

数値は適当ですが、こんな感じでしょうか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta content="ja" http-equiv="content-Language" />
<meta content="text/css" http-equiv="content-style-type" />
<title>ホームページタイトル</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000000;
overflow: hidden;
}
#wrap{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#header{
margin: 0;
padding: 0;
width: 100%;
height: 100px;
background-color: #f6ff06;
}
#flashcontents{
margin: 0;
padding: 0;
width: 800px;
height100%;
background-color: #cccccc;
position: absolute;
top: 100px;
bottom: 100px;
overflow: auto;
}
#footer{
margin: 0;
padding: 0;
width: 100%;
height: 100px;
background-color: #ff0008;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="flashcontents">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

参考になればいいのですが。