ページ下部にフッタが残っていません

私はモバイルユーザー向けのウェブサイトを最適化しようとしています。サイトで作業しているときに、非常に小さな画面（具体的には450px以下）でフッターが壊れ、ページの下部に詰まっていないことに気付きました。ページ下部にフッタが残っていません

私は、#viewWrapper divとは関係がありますが、検査後にクロームコンソールを使用して、数日間ポジション、物理サイズなどを騒がして解決策を見つける必要があると私は信じています。それに。

何か助けていただければ幸いです。ここではページへのリンクは疑問である：ページの
http://mhtc-vm1.cs.wpi.edu:8080/test/explore

構造：

<body> 
    ... 
    <div class="container-fluid-full"> 
     ... 
     <div id="content"> 
      ... 
      <div id="viewWrapper"> 
       ... 
      </div> 
     </div> 
    </div> 
    <footer>...</footer> 
</body>

いくつかの相対的なCSS：

@media only screen and (max-width: 450px) { 
    #viewWrapper { 
     left: 0px; 
    } 
} 

#viewWrapper { 
    position: absolute; 
    top: 180px; 
    left: 450px; 
    right: 0px; 
    bottom: -160px; 
    overflow: hidden; 
    border: 0; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
    display: block; 
} 

.site-footer { 
    position: relative; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    z-index: 999; 
    padding: 10px 0px !important; 
    clear: both; 
    display: block; 
}

出典

2016-12-15 xjsc16x

を書きたいことがあります。 –

私はいくつかの相対的なコードを含めるように質問を更新しました、ごめんなさい – xjsc16x

あなたは外部のウェブページへのリンク、実際のコードを投稿してくださいません

@media screen 
    and (max-device-width: 1024px) { 

    #viewWrapper{ 
     bottom: 0; //apply bottom 0 with media query for small screen only 
    } 

}

出典

2016-12-15 04:03:05 Rahul

ありがとう、これは固定！ – xjsc16x

を使用して、2つのフッターにdivタグとそれを与えますあなたが画面遷移に一緒に流れるようなスタイル。

<footer id="colophon" class="site-footer" role="contentinfo"> 
    <div class="site-info container"> 
     <p class="copy">&copy; 2016. Worcester Polytechnic Institute. All Rights Reserved. 
     Sponsored by Mass High Technology Council</p> 
    </div> 
     <div style="float:right;padding-right:20px"> 
     <a class="footerLinks" href= "api"> For Developers </a> 
     <a class="footerLinks" href= "feedback"> Contact Us</a> 
     <a class="footerLinks" href= "about"> About Us </a><br /> 
     </div> 
    <!-- .site-info --> 
</footer>

出典

2016-12-15 03:53:31 chop62

ページ下部にフッタが残っていません

答えて

関連する問題