- 締切済み
常に画面の下部に表示させたい
ヘッダー、コンテンツ、フッターをdivで作成し、 コンテンツがテキスト1行だとしても、 フッターを常に画面の下部に配置したいのです。 スタイルシートを使用して作成するにはどうしたらよいでしょうか？ コードは以下のようになっています。IE6.0使用。 ---------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>常に下部表示</title> </head> <body> <div id="header">ヘッダー</div> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </body> </html> ---------------------------------------------- 上記だと、すべて上部に詰まります。 #id { position : absolute; bottom : 0 ;} とすると、一見よさそうですが、#contentsの中身が多くなると、画面上で重なってしまいます。 (ーー;)
- partita
- お礼率29% (122/412)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- nuruhho44
- ベストアンサー率57% (38/66)
ご希望の動作とは違うかもしれませんが、ご参考までに。 <HTML> <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 { margin : 0px; } .header { height : 10%; background-color : #ffffaa; } .contents { height : 80%; background-color : #aaffff; } .footer { height : 10%; background-color : #ffaaff; } --> </STYLE> </HEAD> <BODY> <DIV class="header">ヘッダー<BR><A href="javascript:void(0);" onclick="document.getElementById('ct').innerHTML+='<BR>コンテンツ';">コンテンツ内容追加</A></DIV> <DIV class="contents" id="ct">コンテンツ<BR>コンテンツ<BR>コンテンツ<BR>コンテンツ<BR>コンテンツ<BR>コンテンツ</DIV> <DIV class="footer">フッター</DIV> </BODY> </HTML> 「コンテンツ内容追加」をクリックしていってください。 TABLEでやっても同じことで、単純にheightを％で指定しただけです。よってブラウザを開く大きさ（高さ）によってヘッダー・コンテンツ・フッターそれぞれの高さも変わってしまいます。
- mameusa
- ベストアンサー率50% (87/174)
bodyでoverflowの指定をしてから、 （scrollがautoかな？） フッターの<div>の中に style="position:absolute; bottom:0%" としても重なってしまいますか？
補足
御回答ありがとうございます！ まず、補足ですが、以下のようにしたいと思ってます。 １．コンテンツが少ないときにはフッターは最下部 ━━━━━━━━━━━━━━━━━━━━ ヘッダー ｜ コンテンツ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ フッター ｜ ━━━━━━━━━━━━━━━━━━━━ ２．コンテンツが多いときにはフッターは画面外に出てもよい ━━━━━━━━━━━━━━━━━━━━ ヘッダー ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ コンテンツ ｜ ━━━━━━━━━━━━━━━━━━━━ コンテンツ コンテンツ フッター ※テーブルレイアウトを使用すればできるんですが、CSSを使用することが必要になっています。 mameusaさんのおっしゃるとおりにやってみましたが、 ２．のときに、フッターが画面「内」の最下部に配置されてしまいます。 また、body { overflow : scroll }にすると、スクロールバーが二重になってしまうので、避けたいと思います。 急務ではないので、お分かりの方、よろしくお願いします。
関連するQ&A
- css 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには？
お世話になります。 タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。 なにかいい方法がないか、ご教授いただけると幸いです。 尚、テーブルは使わない方法でお願いします。 以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#h100 { height:100%; background-color:#eeeeee; } div#header { background-color:black; color:white; } div#container { background-color:#ffffee; } div#footer { background-color:black; color:white; } --> </style> </head> <body> <div id="h100"> <div id="header">ヘッダー</div> <div id="container">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html>
- ベストアンサー
- HTML
- 【CSS】不具合の原因がわかりません。
すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます（縦に3つ並びます）。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 （企業によるガイドラインなので詳しくは書けません。すいません・・・。） 「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか？ よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }
- 締切済み
- HTML
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- HTML
- ヘッダー・フッター固定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; 他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。
- 締切済み
- CSS
- [CSS] 常にフッターは下部に表示 IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> <div id="container"> <div id="main"><p>内容</p></div> <div id="footer">Copyright</div> </div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 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
- CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
- IE8.0表示について
IE8.0で現在作成済みのWEBの動作確認を行っているのですが、5回に1回ぐらいあるイメージが表示されなくなったり、スタイルが崩れたりすることが判明し、最小構成にてチェックを行っているのですが、やはり同じ状態です。しかし、ページをリロードすると直ります。 どなたかアドバイスいただけませんでしょうか。 ちなみにmetaやHTTPヘッダの操作ではなくWeb標準準拠モードで表示させたいと思っています。 よろしくお願い致します。 サンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-language" content="ja"> <title>ダミーテキスト</title> <script type="text/javascript" src="/public/test.js"></script> </head> <body id="TOP_POINT"> <div> <!-- ▽ヘッダーロゴ▽ --> <div><img src="/public/img/logo.gif" width="150" height="55" alt="ロゴ"></div> <!--△ヘッダーロゴ△--> <!-- ▽ヘッダーお問い合わせ▽ --> <div><a href="問い合わせアドレス"><img src="/public/img/contact1.gif" alt="お問い合わせ" width="80" height="10"></a></div> <!-- △ヘッダーお問い合わせ△ --> </div> <p>ダミーテキスト</p> </body> </html>
- ベストアンサー
- HTML
- ドコモの背景について
ドコモの公式サイトを見たら背景が三つにわかれていたりしているのですがあれは一体どうやったらできるのでしょうか？？ 無料のHP作成で使えるタグなのでしょうか？ またそのタグを是非教えてほしいです。 調べてもよくわからなかったので・・・。 ちなみに <?xml version=”1.0” encoding=”Shift_JIS”?> <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”> <html lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> <title>test</title> </head> <body> <div style=”background-color:red”> </div> <div style=”background-color:blue”> </div> <div style=”background-color:green”> </div> </body> </html> というのをそのまま試しに貼り付けてみてもできませんでした・・・・。 ?xml version=”1.0” encoding=”Shift_JIS”?> <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”> <html lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> の部分の事がわからないのが原因かと…。 誰か心優しい方教えて下さい・・・。
- ベストアンサー
- HTML
- HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { height:100%; } body { margin:0px; height:100%; } #body { width:700px; margin:0px auto; } #header { background:#ccffcc; height:100px; /* width:100%;*/ width:700px; position:fixed; } #main { padding-top:100px; background:#ffff99; } #footer { background:#ffcc99; height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
補足
ご回答ありがとうございます。 私のやろうとしていることは、まさにこんな感じです。 せっかく作っていただいたのにこんなことを言っては何ですが、 １．Netscapeでは作動しません。コンテンツが増えると重なってしまいます。 ２．IEでは、作動しましたが、DOCTYPE宣言を入れると作動しませんでした。 フッター固定なんて普通しないのかな…。 私もいろいろ試しているのですが、なかなかうまくいかなくて。 もう少し頑張ってみます。