¿Cómo puedo hacer que este pie de página anidado se adhiera a la parte inferior?

He estado probando algunas cosas diferentes y no estoy seguro de cómo hacer que este pie de página se adhiera al final. La dificultad surge porque hay una serie de divs anidados unos dentro de otros. Lo que quiero lograr es que los envoltorios de borde derecho y borde izquierdo vayan a la parte inferior de la página para rodear el pie de página, pero el pie de página debe estar en la parte inferior de la página.

para explicar un poco todos los divs anidados: el cuerpo tiene la imagen de fondo de mosaico principal aplicada y #background tiene una superposición transparente que hace que se desvanezca hacia los bordes. los divs border-right y border-left tienen una imagen repetida como fondo que sirve como bordes para el div de contenido.

Y el div de pie de página debería estar totalmente separado, lo sé, pero cuando lo hago para que permanezca centrado en el ancho de la ventana en lugar del ancho del borde izquierdo, se ve torcido cuando la pantalla se encoge.

La estructura básica de la página es la siguiente y también he publicado un jsfiddle: http://jsfiddle.net/cutcopypaste/zry4T/

<body>
<div id="background">
    <div id="container">

        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <p>Menu</p>
            </div>
        </div>

        <div id="border-left">
            <div id="border-right">

                <div id="content">

                    <p>Page Content</p>     
                </div>
            </div>
        </div>
    </div>
        <div id="footer">
            <p>Footer</p>
        </div>
</div>
</body>

preguntado el 11 de febrero de 11 a las 20:02

debieras leer este. -

@zzzzBov He probado la técnica descrita allí y no funciona en mi página: jsfiddle.net/cutcopypaste/zry4T/9 -

2 Respuestas

Mi solución: http://jsfiddle.net/zry4T/15/

<body>
<div id="background">
    <div id="container">

        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <p>Menu</p>
            </div>
        </div>
        <div id="wrapper">
        <div id="border-left">
            <div id="border-right">

                <div id="content">

                    <p>Page Content</p>     
                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>

</div>    <div id="footer">
            <p>Footer</p>
    </div>
</div>
</body>

<style type="text/css">
*
{
 margin: 0;
 padding: 0;
}
html, body
{
 height: 100%;
 line-height: 1.2;
}

body
{
 background: #000 url(../images/bg-pattern.png) center top repeat;
}

#background
{
 background: url(../images/overlay.png) center top repeat-y;
 min-width: 960px;
 padding-left: 1px;
}

#container
{
 background: red center top no-repeat;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -60px;   
 overflow: hidden;
 width: 960px;
 z-index: 10;
}

#header
{
}
#logo
{
 height: 114px;
 width: 960px;
}
#logo a
{
 border: none;
 display: block;
 height: 90px;
 margin: 60px auto;
 width: 640px;
}

#menu
{
 background-color: orange;
}

#border-left
{
 background: blue url(../images/border-left.png) repeat-y 1px -5px;
 height: 100%;
 margin: -4px auto 0;
 width: 912px;
}
#border-right
{
 background: blue url(../images/border-right.png) repeat-y 857px -5px;
 height: 100%;
}
#content
{
 background: yellow url(../images/stripes.gif) center top repeat;
 margin: 35px auto 0;
 min-height: 100px;
 padding: 8px 33px 110px;
 width: 738px;
 z-index: 10;
}

#push {height: 60px;}

#wrapper{
width:960px;
margin:o auto;
}
#footer
{
 background: green url(../images/footergradient.png) repeat-x;

 height: 60px;
 margin: 0 auto;
clear:both;
 text-align: center;
 width: 808px;
}
</style>

Respondido el 17 de diciembre de 11 a las 00:12

hmm ... No sé si estás viendo algo diferente, pero ese pie de página no se pega al final para mí ... - Damon

¿Esto le indica la dirección correcta?

http://jsfiddle.net/zry4T/28/

Básicamente, coloqué el pie de página absolutamente en la parte inferior del contenedor y me aseguré de que el contenedor sea al menos tan alto como el contenido.

EDITAR: violín actualizado

Respondido el 17 de diciembre de 11 a las 03:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.