Le pied de page ne reste pas au bas de la page

Je suis en train d'essayer d'optimiser un site Web sur lequel je travaille pour les utilisateurs mobiles. En travaillant sur le site, j'ai remarqué que sur de très petits écrans (spécifiquement 450px et moins large) mon pied se casse et n'est plus collé au bas de la page.Le pied de page ne reste pas au bas de la page

Je crois que le coupable à être quelque chose à voir avec le div #viewWrapper mais après inspection à travers la console chromée et déconner avec elle (position, taille physique, etc.) pendant quelques jours je n'ai pas encore trouvé une solution à lui.

Toute aide est appréciée. Voici le lien vers la page en question:
http://mhtc-vm1.cs.wpi.edu:8080/test/explore

Structure de la page:

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

Certains CSS relative:

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

Source

2016-12-15 xjsc16x

S'il vous plaît code postal réel, pas des liens vers des pages Web externes. –

J'ai mis à jour la question pour inclure un certain code relatif, désolé – xjsc16x

vous pouvez écrire

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

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

}

Source

2016-12-15 04:03:05 Rahul

Merci, cela l'a réparé! – xjsc16x

Utilisez deux div balises en pied de page et lui donner la style que vous aimez, ils vont couler ensemble dans la transition de l'écran.

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

Source

2016-12-15 03:53:31 chop62

Le pied de page ne reste pas au bas de la page

Répondre

Questions connexes