- 締切済み
ヘッダー・フッター固定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; 他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。
- happy_sunny7
- お礼率75% (3/4)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは 数値は適当ですが、こんな感じでしょうか？ <!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"> <!-- header --></div> <div id="flashcontents"> <!-- flashcontents --></div> <div id="footer"> <!-- footer --></div> <!-- wrap --></div> </body> </html> 参考になればいいのですが。
お礼
sora1tora2 様 ご報告が遅くなり申し訳ございませんでした。 ソースをご参考にさせて頂きましたところ、理想の形ができました。 ありがとうございます！大変、助かりました。 現在、どこの箇所が悪かったのか模索中です（笑） 丁寧なご説明で回答いただきありがとうございました。