Estoy tratando de optimizar un sitio web en el que estoy trabajando para usuarios móviles. Mientras trabajaba en el sitio, noté que en pantallas muy pequeñas (específicamente de 450 px y menos anchas) mi pie de página se rompe y ya no está pegado al final de la página.

Creo que el culpable tiene algo que ver con el div #viewWrapper, pero después de inspeccionarlo a través de la consola de Chrome y jugar con él (posición, tamaño físico, etc.) durante unos días, todavía tengo que encontrar una solución. lo.

Se agradece cualquier ayuda. Aquí está el enlace a la página en cuestión:
http://mhtc-vm1.cs.wpi.edu:8080/test/ explorar

Estructura de la página:

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

Algún CSS relativo:

@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;
}
2
xjsc16x 15 dic. 2016 a las 06:41

2 respuestas

La mejor respuesta

Es posible que desee escribir

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

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

 }
2
Rahul 15 dic. 2016 a las 04:03

Usa dos etiquetas div en el pie de página y dale el estilo que te gusta; fluirán juntas en la transición de pantalla.

    <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>
1
chop62 15 dic. 2016 a las 03:53