1319651603 HTML&CSSに関しての質問です。


下記のサイトを参考にしつつ作成しています。

参考:http://scuderia-web.com/tips/xhtml_css/footer.php

ここのサンプルでも発生するのですが、
IEでのみウィンドウを縦方向にリサイズした場合のみ
高さが変更されず、フッターの位置や背景が中途半端な位置のままになってしまいます。

※添付画像は縦方向にリサイズした後の状態です。
※リサイズ前はきれいにウィンドウにフィットした状態で表示されています。

※ウィンドウサイズのみ縦にのび、中身はリサイズされていない状態
※互換モードにしても同様の動作になります

なお、この状態で一旦横方向のリサイズを実施すると
高さが自動的に画面サイズまで修正されてきれいに下まで表示されるようになります。

その他のブラウザでは発生しません。

リサイズされた場合も、他のブラウザ同様にきれいにフッターは
画面下に表示され、また背景もきれいに下まで表示されるようにしたいのですが
どのように修正すればよいのでしょうか。

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/27 02:53:26
  • 終了:2011/11/03 02:55:03

回答(1件)

id:266586389@twitter No.1

mafumafuultu回答回数135ベストアンサー獲得回数402011/10/27 22:40:28

こんな感じで大丈夫でしょうか?

<div id="mmm">
 <div id="foot">フッター</div>
</div>

以下css


div {    
}
#mmm {
    width: 100%;
    height: 0px;
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    position: fixed;   
    bottom: 0;  
    left: 0;
}
#foot {
    background-color: rgba( 0,0,0,0);
    margin: 0;
}

id:Auxo

ご回答ありがとうございます。

参照先のソースのid=foot部分のスタイル指定を差し替え、HTML部分も同様に差し替えて試しましたが、今度はリサイズ(縦方向)しないと表示されないようです。

※表示時点ではフッターは画面上に表示されず、リサイズ後に画面下から見えるようになる感じです。

2011/10/28 02:25:50
id:266586389@twitter

「ページの一番下にフッターを固定する」ということでしょうか?

position の値を fixed から end に変えると

フッターはページの一番下に固定されます。

「ウィンドウに固定する」ということであれば

HTML5の DOCTYPE宣言 <

!DOCTYPE html
>で

<

?xml version="1.0" encoding="UTF-8"?
>

<

!DOCTYPE html
>

<

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"
>

2011/10/28 06:20:43
  • id:rouge_2008
    すみません。解決方法ではないです。

    IE8以下のバージョンでご質問の現象が発生する事を確認しました。(※IE9は問題なし。)
    マウスでブラウザの画面サイズを拡大または縮小した場合に問題の現象が発生しますが、「最大化」・「元に戻す」ボタンでのサイズ変更では問題ありませんでした。
    ほとんどの人は、ブラウザ画面右上のボタンでサイズ変更をしていると思いますし、コンテンツ量が少ないページでブラウザのサイズ変更をする人はあまりいないと思います。
    (コンテンツ量が多いページでは、問題は発生しないと思います。)
    この問題については気にせず、紹介されているCSSをそのまま使用しても大丈夫ではないかと思います。
    「height」に「auto」が指定されている場合の、IEのバージョンによる動作の違いだと思いますので、この問題に対応する場合、まったく別な方法に変更してフッタを固定する必要があるかもしれません。
    別の方法(CSS)は思いつきませんので、この問題に対処したい場合は、他の方からの回答を待ってみてください。
  • id:Auxo
    >rouge_2008

    コメントありがとうございます。
    実際のところフッターそのものの位置には解決すればよい程度の認識なのですが、
    この現象は背景画像や背景色まで全て同様にリサイズに追随しない現象なので、
    背景画像や背景色を活用したデザインにすると結構悲しい状況になってしまいます。

    確かにIE9では再現しないのでかなり限定的な影響なのですが、何とも気持ち悪い動作です。。。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません