Me gustaría una página con un pegajoso pie de página, y me gustaría que el contenido por encima de él para ser capaces de desplazamiento, mientras que el mantenimiento de la viscosidad del pie de página. Pero no quiero codificar la altura de la zona de contenido, sino como su altura para toda la altura disponible excepto para la altura del pie de página.

En el largo plazo, incluso me atrevería como para la altura de la capaces de desplazamiento área de contenido de volver a ser considerable si la ventana modificar el tamaño, pero me estoy adelantando a mí mismo. Estoy suponiendo que voy a necesitar una combinación de CSS y Javascript para lograr esto, que CSS por sí solo no puede lograr esto?

Yo he investigado, por supuesto, y han encontrado la propiedad overflow de CSS, pero mi CSS en general no es muy buena 🙁 a Continuación se muestra un poco de CSS/HTML he improvisado basado en ryanfait.com’s pegajosa de pie de página del tutorial, si alguien me puede dar algunos consejos de usar esto como un punto de partida. Tener en mente, voy a necesitar recta Javascript no jQuery, ya que este será utilizado en un navegador personalizado (http://tkhtml.tcl.tk/hv3.html). Mi Javascript a diferencia de mi CSS, aunque es bastante buena, por lo que una respuesta combinación de CSS específica sugerencias con el general Javascript sugerencias (de la que hablaré a continuación de carne), sería ideal.

<html>
    <head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

EDIT: Lo he intentado basado en los primeros dos respuestas:

He hecho las siguientes modificaciones en el CSS basado en partes de las dos respuestas recibidas hasta el momento:

<style>
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
  overflow-y: scroll;
}
.footer {
  bottom: 0;
  height: 4em;
  position: fixed;
}
</style>

Lo que esto me da en Cromo son dos barras de desplazamiento, uno muy débil, pero la más destacada en la que se sigue permitiendo que el contenido que se desborda (tal vez estoy usando el término de manera incorrecta?) fuera de la envoltura de la zona, y en la parte superior (o debajo de la parte inferior) del pie de página, además de fuera de todo el cuerpo. Gracias por ayudar a hacer progresos, pero todavía necesito un poco de ayuda. Aquí hay un enlace a una captura de pantalla de lo que estoy viendo; yo solía http://www.ipsum-generator.com/ para generar todo el contenido.

http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG

3 Comentarios

  1. 4
    html, body {
        height:100%;
        overflow:hidden;
    }
    .wrapper {
        overflow-y:scroll;
        height: 90%;
    }
    .footer {
        position:static;
        bottom: 0;
        height: 10%;
    }

    Demo: http://jsfiddle.net/vfSM3/

    • No quiero codificar las alturas como porcentajes. Quiero una altura fija para el pegajoso pie de página, y la envoltura de la altura dinámica. Lo siento si no fui lo suficientemente específico
    • Ok, veo cómo, incluso en mi revisado pregunta, me perdí tu html/cuerpo overflow:hidden, de modo que se ocupa de la cuestión de las dos barras de desplazamiento a la derecha. Así que estoy viendo el valor en su respuesta, y tal vez ser capaz de utilizar Javascript para obtener las alturas de la forma en que yo quiero.
    • Voy a aceptar, no funciona en Chrome, aunque no es mi costumbre navegador, y me ayuda a lo largo de la ruta, incluso a pesar de las alturas están codificadas. Para mi explorador personalizado aplicación que en realidad puede recurrir a marcos: es una aplicación de escritorio utilizando las tecnologías de la web (no a diferencia de lo que se podría crear con Adobe AIR), por lo que no tienen las mismas inquietudes en contra de marcos a los que normalmente tendría. Además de la CSS y Javascript es peculiar, ya que es un navegador personalizado, y que fácilmente se puede tener más control de uso de marcos. Gracias
  2. 1

    En el pie de página div posición fija y la parte inferior 0 igual:

    .footer {
      bottom: 0;
      height: 4em;
      position: fixed;
    }
    • No me importa acerca de la IE. Necesito alguna orientación adicional cuando se trata de las reglas CSS necesarias para hacer que el div de contenido capaces de desplazamiento, aunque.
    • Sólo IE6 no soporta position: fixed; yo recomendaría más exactitud la próxima vez que quieras darle consejos.
  3. 0

    Si quieres usar fija de altura en el pie de página, se podría hacer lo siguiente

    .wrapper{
         overflow-y:scroll;
         height:calc(100% - 20px);
    }
    
    .footer {
        position:static;
        bottom: 0;
        height: 20px;
    }

    Tenga en cuenta que usted necesita para utilizar los espacios de aquí «100% – 20px» en orden para que funcione.

Dejar respuesta

Please enter your comment!
Please enter your name here