![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_15.png?e8efa67)
モダンブラウザでは綺麗に表示され『IE11』のみフッターが中央に重なってしまいます。
検索参考サイトをさんざん見て色々やりましたが解決できませんでした。
なにゆえ素人なので専門知識のある方ご指導宜しくお願い致します。
●ソースで余計な部分は削除してあります。
*********************************************
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/zukan.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="flex-cotainer">
<div class="wrapper">
<header>
</header>
<div class="flex-items">
</div>
</div>
<footer>
<p class="title">
</p>
<p>Copyright © .</p>
</footer>
</div>
</div>
</body>
</html>
*********************************************
CSS3
@charset "UTF-8";
/* ページ全体 */
body {
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif;
background-color: #E9E9E9;
}
.flex-cotainer {
display: flex;
flex-direction: column;
}
.wrapper{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.flex-items {
flex: 1;
background-color: #c1f4ca;
display: flex;
flex-wrap: wrap;
padding-bottom: 20px;
}
.flex-cotainer .wrapper header h1 {
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif;
font-size: 27px;
color: #f4f3f3;
text-align: center;
padding-top: 20px;
}
header{
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif;
font-size: 14px;
text-align: center;
margin-top: 5px;
background: #100451;
}
.content1 {
flex: 1 1 150px;
background-color: #aee9a4;
font-size: 12px;
text-align: center;
}
.content2 {
flex: 3 1 350px;
background-color: #c1f4ca;
text-align: center;
}
@media (max-width: 700px) {
#content {
width: auto;
}
img {
max-width: 100%;
height: auto;
text-align: center;
}
/* メインコンテンツ */
.content2 p {
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif;
font-size: 18px;
color: #082203;
text-align: center;
line-height: 1.7em;
}
/* フッター */
footer {
background-color:#000080;
color: #FFF;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
padding-top: 5px;
padding-bottom: 5px;
font-size: 18px;
text-align: center;
}
●レスポンシブでスマホ対応サイトを作っていますが、IE11でも表示できるよう
ご指導、ご鞭撻、どうぞ宜しくお願い致しますm(__)m
●製作中のサイトURL → http://ind5blue.matrix.jp/zukan/zukan.html
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?e8efa67)
No.1ベストアンサー
- 回答日時:
IEは邪魔なんですね、非標準部分が有るからサイト作成者にとって邪魔な存在です。
が、実在して使用ユーザも多いから仕方無い。
<div class="wrapper">の中へfooterを入れ込んで下さい。
(<footer>の前の</div>を1個にして、</footer>の後の</div>を2個にする。)
</div>
</div>←1個削除する
<footer>
</footer>
</div>
</div>←1個追加する
</body>
レイアウトは調整して下さい。
t_fumiaki様へ とても分かりやすい回答ありがとうございます!!
●教えて頂いた通りに<div class="flex-items">の閉じ</div>削除✔
●</footer>の下に</div>
●結果、メインコンテンツの右にフッター並んでしまいましたヾ(^ω^;)
★崩れたページのリンク → http://ind5blue.matrix.jp/zukan-test.html
*********************************************
● t_fumiaki 様の言う通りにソースにするとIE11でフッター最下部に表示されますでしょうか!?
●もし、表示されるようならhtmlのサンプル紹介していだだけますと助かります。
暇な時でよろしいので、アドバイス宜しくお願い致しますm(__)m
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?e8efa67)
No.3
- 回答日時:
No.2 1個忘れました。
footerのcssに width:100%; を追加して下さい。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?e8efa67)
No.2
- 回答日時:
>>●結果、メインコンテンツの右にフッター並んでしまいました
cssで footer{・・・} を記述してる場所がマズイ。
@media (max-width: 700px) ・・・ の上へ移動する。
重ね重ね丁寧な回答ありがとうございます!!
その②フッターを移動しました。
★遂に!! とうとう!! ノートパソコンの使わない廃屋にあったIE11、教わったとおり全て実行=3=3=3
見事にIE11でレイアウト崩れなく、フッター最下部に配置されました(・ω・)v
なんとお礼を言って良いのやら、 t_fumiakiさんの愛ある回答に心より深く感謝致します!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
python03について。
-
Adobe Premiere Proについて質...
-
Adobe Premiere Proです。 シー...
-
vba クリップボードクリアにつ...
-
文系のSE志望です。プログラミ...
-
python3について。
-
python3について。
-
そのまま使っただけなのに・・...
-
プログラムの起動、利用につい...
-
Python - Excel で Webからデー...
-
htaccessで特定のディレクトリ...
-
pythonでのカーソル移動がずれる
-
python3について。
-
Arduinoに関する質問
-
Pythonのコードエラーについて...
-
pythonにてseleniumを使うも、...
-
Pythonについて。
-
batファイル、コマンドプロンプ...
-
バッチファイルについて
-
BATファイルについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLで、何故か左右のfloatの高...
-
CSSのborderが実際の領域より上...
-
ADOBE DW 5.5 ヘッダとコンテ...
-
html+cssでフレーム落ちしてし...
-
CSSのdivで何故かボックスセン...
-
スーマートフォンの用のHP作成...
-
ホームページ作成 画像の回り込み
-
opacityとbackground-color
-
ロールオーバーで吹き出しをつ...
-
CSSを使った全体の配置
-
CSSについて教えてください
-
自作HPのレイアウトがセンタ...
-
ロールオーバーの上にz-index
-
div内の classのリンクのつけ方
-
cssについて教えてください.3
-
同じピクセル、解像度のPC表示...
-
flexboxでフッターが、本文に重...
-
ホームページビルダー14で作成...
-
ヘッダーのみを横幅いっぱいに...
-
ホームページビルダー16 ペー...
おすすめ情報