詳しい人求む！

flexboxでフッターが、本文に重なってしまいます（汗）

解決済

質問者：文鳥さん
質問日時：2018/04/01 17:04
回答数：3件

モダンブラウザでは綺麗に表示され『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", "ＭＳＰゴシック", 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", "ＭＳＰゴシック", 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", "ＭＳＰゴシック", 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", "ＭＳＰゴシック", 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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： t_fumiaki
回答日時：2018/04/01 18:00

IEは邪魔なんですね、非標準部分が有るからサイト作成者にとって邪魔な存在です。

が、実在して使用ユーザも多いから仕方無い。

<div class="wrapper">の中へfooterを入れ込んで下さい。
(<footer>の前の</div>を1個にして、</footer>の後の</div>を2個にする。)

</div>
</div>←1個削除する
<footer>

</footer>
</div>
</div>←1個追加する
</body>

レイアウトは調整して下さい。

- 0
- 件

通報する

この回答へのお礼

うーん・・・

t_fumiaki様へとても分かりやすい回答ありがとうございます!!

●教えて頂いた通りに<div class="flex-items">の閉じ</div>削除✔

●</footer>の下に</div>

●結果、メインコンテンツの右にフッター並んでしまいましたヾ(^ω^;)

★崩れたページのリンク → http://ind5blue.matrix.jp/zukan-test.html

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

● t_fumiaki 様の言う通りにソースにするとIE11でフッター最下部に表示されますでしょうか！？

●もし、表示されるようならhtmlのサンプル紹介していだだけますと助かります。

暇な時でよろしいので、アドバイス宜しくお願い致しますm(__)m

通報する

お礼日時：2018/04/02 03:34

No.3

回答者： t_fumiaki
回答日時：2018/04/02 05:21

No.2 1個忘れました。

footerのcssに　width:100%; を追加して下さい。

- 0
- 件

通報する

この回答へのお礼

うわーありがとうございます!!
footer cssに「width:100%」追加します。

通報する

お礼日時：2018/04/03 03:38

No.2

回答者： t_fumiaki
回答日時：2018/04/02 05:08

>>●結果、メインコンテンツの右にフッター並んでしまいました

cssで　footer{・・・}　を記述してる場所がマズイ。

@media (max-width: 700px) ･･･　　の上へ移動する。

- 0
- 件

通報する

この回答へのお礼

重ね重ね丁寧な回答ありがとうございます!!

その②フッターを移動しました。

★遂に!! とうとう!! ノートパソコンの使わない廃屋にあったIE11、教わったとおり全て実行=3=3=3

見事にIE11でレイアウト崩れなく、フッター最下部に配置されました(･ω･)ｖ

なんとお礼を言って良いのやら、 t_fumiakiさんの愛ある回答に心より深く感謝致します!!

通報する

お礼日時：2018/04/03 03:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！