人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

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

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

よろしくお願いします。

1319651603
●拡大する

●質問者: Auxo
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● mafumafuultu

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

<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;
}


Auxoさんのコメント
ご回答ありがとうございます。 参照先のソースのid=foot部分のスタイル指定を差し替え、HTML部分も同様に差し替えて試しましたが、今度はリサイズ(縦方向)しないと表示されないようです。 ※表示時点ではフッターは画面上に表示されず、リサイズ後に画面下から見えるようになる感じです。

mafumafuultuさんのコメント
「ページの一番下にフッターを固定する」ということでしょうか? <code>position</code> の値を <code>fixed</code> から <code>end</code> に変えると フッターはページの一番下に固定されます。 「ウィンドウに固定する」ということであれば HTML5の DOCTYPE宣言 <<pre>!DOCTYPE html</pre>>で <<pre>?xml version="1.0" encoding="UTF-8"?</pre>> <<pre>!DOCTYPE html</pre>> <<pre>html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"</pre>>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ