Mantener el pie de página en la parte inferior de la ventana en el sitio que se desplaza horizontal

Question

Tengo un sitio de desplazamiento completamente horizontal,

topnav (posición fija)

Nav (posición fija)

contenido (de lado desplazamiento)

pie de página (posición fija)

Todo parece estar funcionando muy bien, pero el problema que tengo es que si el contenido es b lo suficiente para desplazarse horizontalmente, coloca el pie de página detrás de la barra de desplazamiento horizontal, así que en unas pocas páginas hice el #footer {inferior: 16px} más o menos para tener en cuenta la barra de desplazamiento horizontal allí.

Lo que estoy teniendo problemas con diferentes resoluciones del monitor. Obviamente, el contenido se desplazará horizontalmente o no en función del tamaño de la ventana. ¿Hay alguna forma de mantener el pie de página en la parte inferior (o encima de la barra de desplazamiento horizontal) SIN IMPORTAR QUÉ resolución o tamaño de ventana?

Answer 1

Después de mucho ensayo y error, me pareció que es la mejor solución para una siempre-on-the-bottom-pie de página:

HTML:

<div class="footer"> 

    <div class="footer_contents"></div> 

</div> 

CSS:

.footer { 

    height:24px; // Replace with the height your footer should be 
    width: 100%; // Don't change 
    background-image: none; 
    background-repeat: repeat; 
    background-attachment: scroll; 
    background-position: 0% 0%; 
    position: fixed; 
    bottom: 0pt; 
    left: 0pt; 

} 

.footer_contents { 

    height:24px; // Replace with the height your footer should be 
    width: 1000px; // Visible width of footer 
    margin:auto; 

} 

Answer 2

Hay unos dos posibilidades que ver:

primera opción cuerpo Fuerza para mostrar la barra de desplazamiento siempre. Pero esto puede parecer extraño.

body { overflow-x: scroll; } 

segunda opción Haga que su contenedor de contenido siempre por encima de su pie de página. esto es posible si su pie de página tiene una altura fija. Luego, tendrá la barra de desplazamiento sobre su pie de página.

<div id="contentWrapper"> 
    <div id="content">Here comes your content</div> 
</div> 

Y aquí el CSS voy a explicar ahora

body, html { 
    height: 100%; 
    overflow: hidden; 
} 

#contentWrapper { 
    overflow-x:auto; 
    overflow-y: hidden; 
    height: 100%; 
    margin-top: -16px; // add the footer height 
} 

#content { 
    padding-top: 16px; // add the footer height 
    width: 6000px; 
} 

El #contentWrapper tiene que tener un margen negativo en la altura de la barra de desplazamiento, además de su altura de pie de página. El #content tiene que tener el mismo valor que el relleno superior, por lo que su contenido en la parte superior no estará fuera de la página.

Answer 3

Mi mejor idea sería tener el amplio contenido como parte de su propio div desplazable. El pie de página se mantendría en su lugar en la parte inferior del contenido, pareciendo estar siempre centrado.

Si desea que las barras de desplazamiento no estén por encima del pie de página, probablemente pueda hacer algo con un div y algunos css, como poner un div vacío del tamaño del pie de página debajo del ancho contenido y hacer el pie de página real tener la máxima: - (altura del pie de página)

Answer 4

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div> 

El CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

Y una regla CSS simple para IE 6 e IE 5.5:

#container { 
    height:100%; 
}