質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2614閲覧

ie11でfooterより下の部分が空白で表示される。

manabunbun

総合スコア39

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/11 07:57

ie11で表示すると、footer部分より下部が空白で表示されます。
表示される画面の大きさが1200以上になると空白部分が出てきます。
他のブラウザ、chrome,Edge,opera safari
(ipadair2)だと空白部分は、表示されません。

footerを最下部へ固定するわけではないです。

html

1 2<!-- footer部 --> 3 <!-- フッター --> 4<footer class="footer"> 5 <div class="container_footer"> 6 <ul> 7 <li> 8 <a class="footer-toggle footer-menu">会社案内</a> 9 <ul> 10 <li><a href="#">会社概要</a></li> 11 <li><a href="#">沿革</a></li> 12 <li><a href="#">あいさつ</a></li> 13 <li><a href="#">各部署案内</a></li> 14 </ul> 15 </li> 16 <li> 17 <a class="footer-toggle footer-menu">採用情報</a> 18 <ul> 19 <li><a href="#">採用情報</a></li> 20 <li><a href="#">カレンダー</a></li> 21 </ul> 22 </li> 23 <li> 24 <a class="footer-toggle footer-menu">今が旬</a> 25 <ul> 26 <li><a href="#">今が旬</a></li> 27 </ul> 28 </li> 29 <li> 30 <a class="footer-toggle footer-menu">担当者紹介</a> 31 <ul> 32 <li><a href="#">担当者紹介</a></li> 33 </ul> 34 </li> 35 </ul> 36 37 </div> 38</footer> 39

css

1/*フッター*/ 2footer.footer { 3 display: block; 4 width: 100%; 5 font-family: "MS Pゴシック", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic", Sans-Serif, "Meiryo"; 6 font-weight: 100; 7 background-color: #6F787B; 8 color: #fff; 9 margin-top: 30px; 10 /*div.container_footer 終了*/ 11} 12 13

javascript

1$(function() { 2/*フッターアコーディオン*/ 3 var w=$(window).width(); 4 var x=480; 5 if(w<=x) { 6 $(".footer-menu").on("click",function() { 7 $(this).toggleClass("active") 8 .nextAll() 9 .slideToggle(300); 10 }); 11 } 12})

cssなのか、ieの独自仕様なのか他に何が影響しているのか分かりませんでした。
同じような経験をされた方がいらしたら解決策をよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.f.

2017/05/11 08:31 編集

「表示される画面の大きさが1200以上」とは横幅のことでしょうか?ウィンドウ高さよりもコンテンツ高さが低いということではないですよね?画像などがないと今の情報だけではなんとも言えないように思います。
guest

回答1

0

自己解決

m.f.さんご回答ありがとうございました。
1200以上は、横幅の事です。ウィンドウ高さよりもコンテンツ高さが低いです。知りませんでした。
position:fixed; bottom:0px; height:auto;にすれば最下部へ固定表示できるのですが、これだとfooter以外の表示できる部分が限られてしまいます。

色々サイトを見てcssで試してみたのですが、うまくいきませんでした。

結果jQueryで、先頭から要素がある無しを判別して要素の高さを取得して、一番下にくっつけるという手法を取りました。

jQuery

1var $win=$(window); 2 var $headmenu=90; //ヘッダーメニューの高さ 3 $win.on('load',function() { 4 var $winheight=$win.height(); 5 var $winwidth=$win.width(); 6 var $imgheight=$('.simbol-img img').height(); //picture部分 シンボル写真 7 var $headlineheight=$('section.headlinetitle').height(); //headline部分 8 9 //infomenu リンク部分有無チェック 10 if($('section.infomenu-section').size()) { 11 var $infomenuheight=$('section.infomenu-section').height(); //infomenu リンク部分 12 }else{ 13 var $infomenuheight=0; //infomenu リンク部分 14 } 15 16 //概要section有無チェック 17 if($('section.gaiyosec').size()) { 18 var $gaiyosecheight=$('section.gaiyosec').height(); //概要section 19 }else{ 20 var $gaiyosecheight=0; 21 } 22 23 //概要内その他リンク有無のチェック 24 if($('section.otherlinkheader').size()) { 25 var $otherlinkheigjht=$('section.otherlinkheader').height(); 26 }else{ 27 var $otherlinkheight=0; 28 } 29 30 var $footer=$('footer.footer'); 31 32 $footer 33 .delay(0) 34 .animate({ 35 top:((parseInt($headmenu)+parseInt($imgheight)+parseInt($headlineheight)+parseInt($infomenuheight)+parseInt($gaiyosecheight)+parseInt($otherlinkheight))*1.2), 36 opacity:1 37 },{ 38 duration:0, 39 easing:'linear' 40 }); 41 })

かなり原始的な方法になりますが、footerが画面の中央に来るようなことはなくなりました。(どのブラウザでも)
他に良い方法があれば、よろしくお願いします。

投稿2017/05/15 03:49

manabunbun

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問