CSSに追加した、footer記述が不完全か

このQ&Aのポイント
  • 画面最小化時にfooterの位置がズレる問題が発生しています。どの部分を修正すべきか分からず困っています。
  • 既に記述しているwrapper要素がfooterの表示に関係している可能性があるのでしょうか。
  • footerのCSSを修正しても、画面最小化時のズレが解消されません。修正方法を教えてください。
回答を見る
  • ベストアンサー

CSSに追加した、footer記述が不完全か 

footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。 どうかご教示のほどお願いします。 (例題を参考にして記述したものです。) html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px;  (例題は、 left: 0; であるが、大幅に左にずれる。) bottom: 0; width: 960px; (例題は、width: 100%; であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。) height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }

  • yoiku
  • お礼率100% (5/5)
  • CSS
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • hok212
  • ベストアンサー率66% (100/150)
回答No.1

回答ではなくアドバイスです。 1.CSS(スタイル)を適用させるHTML(構造)も一緒に載せたほうが回答が付きやすいと思います。 2.用語の使い方として、画面の最大化/最小化ではなく、「ウィンドウ幅が○○ピクセル以上では正常だが、それ未満だと表示が崩れる」といった具体的な数値で示すべきです。 要するに、画面の解像度がXGAの人もいれば4Kの人もいるので、最大化という用語に具体性が無いという意味です。最小化も同じ。

yoiku
質問者

お礼

アドバイスありがとうございます。 質問の仕方が難しく、不十分であることを感じておりました。 PCは特別なものではなく、右上の四角2個のアイコンが最大化で、1個が最小化の意味でした。HTML(構造)における記述に影響あるように思えるので、出来るかどうか自信がないが再質問を考えてみます。

関連するQ&A

  • 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; ######ココマデ よろしくお願いします。

  • 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
  • CSSレイアウトの2カラム左メニューでコンテンツを先にHTMLに記述できる方法をおしえてください。

    趣味でHPを作成しております。 一般的なCSSレイアウト2カラム左メニューにしたいのですが、 HTML部分で左メニューよりコンテンツを先に記述し、 CSSで左メニューで右にコンテンツがくるようにしたいです。 現在のCSSは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてHTML部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu">  メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとHTML部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをHTML部分を変えずにCSSでメニューを左に配置する方法はありますでしょうか? 1週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。

    • ベストアンサー
    • HTML
  • [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などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE7で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか? 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。

    • ベストアンサー
    • CSS
  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか? 実際の記述方法を教えていただけないでしょうか? 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか? #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • HTML
  • CSSでの質問です

    初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか? ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか?

  • CSSレイアウトでフッターをうまく配置出来ません。

    CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px;  margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }

    • ベストアンサー
    • CSS
  • cssについて困っています

    <html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </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
  • フッター固定時の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