- 締切済み
ヘッダー・フッター固定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> 参考になればいいのですが。
関連するQ&A
- ヘッダーのみ固定について
ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ margin: 0px; padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>
- ベストアンサー
- HTML
- カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
- footerを{position:absolute;bottom:0p
footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。
- 締切済み
- HTML
- フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/ Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。
- ベストアンサー
- CSS
- 100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- css固定したフッターが本文と重なってしまいます
#all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、 ウィンドウを小さくしたり、長い文を書いたりすると、 メインの記事がフッターと重なって読めなくなってしまいます。 記事が短い時は、ページ全体の下部に、 長い時はスクロールした一番下にくるようにしたいです。 テーブルのheight指定を使えば同じような効果は得られますが、 テーブルの無いレイアウトをやってみたかったので。 同じような質問は発見したのですが、いい解答が見つかりませんでした。
- ベストアンサー
- HTML
- HTMLのfooterの設定がうまくいきません
HTMLのfooterの設定がうまくいきません 画像のようにleftがrightよりも高さが大きく、 以下のように記述しましたがfooterがうまく ページの最下位に表示されません。 現在は画像の左のような状態で、 右の画像のようにしたいです。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #left{float:left;} #right{float:right;} わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
お礼
sora1tora2 様 ご報告が遅くなり申し訳ございませんでした。 ソースをご参考にさせて頂きましたところ、理想の形ができました。 ありがとうございます！大変、助かりました。 現在、どこの箇所が悪かったのか模索中です（笑） 丁寧なご説明で回答いただきありがとうございました。