Problema con propiedades de Divs

[kenproxd]

Hola,

Este problema es un tanto difícil de explicar, espero que puedan entender y ayudarme.

Resulta que tengo dos Divs (#page y #footer) y cuentan con las siguiente propiedades:

Código CSS:

#footer {
    position:absolute;
    overflow:hidden;
    left:0px;
    right:0px;
    bottom:0px;
    background:#dddddd;
    color:#9b9a9a;
    padding:10px 25px 10px 25px;
    z-index: 3;
}
 
#page {
    position: absolute;
    overflow: hidden;
    margin-bottom: 50px;
    top: 45%;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 50px;
    z-index: 3;
}
 

Trataré de explicarlo con imágenes. Lo que obtengo es esto:



Hasta ahí todo bien. El problema es que cuando se cambia el tamaño de la ventana o se ve en una resolución más baja obtengo lo siguiente:



El div #footer no respeta el margin-bottom de #page, y bueno, por estar en position:absolute es obvio que no lo haga, pero esa es justamente mi duda, ¿cómo hago para que#footer esté siempre al final de la página, y que, si por alguna razón #footer y #page se encuentran no se superpongan? (imagen de ejemplo)



Espero que se haya entendido y puedan ayudarme. Saludos!

[cristian_cena]

hola kenproxd, creo que hablamos sobre tu duda en este tema.

[emprear]

De comparar el código con las imágenes surge algo muy claro

#page no esta en top:45%
#page no tiene 80% de width, está al 100%
#page no tiene ningún height definido
y así varias cosas más, o tu css esta mal o las imágenes de referencia están mal, vas a tener que ser más preciso con tu planteo


Saludos

[kenproxd]

Iniciado por cristian_cena

hola kenproxd, creo que hablamos sobre tu duda en este tema.

Gracias por el link!
Intenté acomodarlo usando este ejemplo y me quedó de la siguiente manera:


(Esta imagen es la parte final del div wrapper hasta el footer).

Código CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
    margin: 0;
    background:#000  url(images/au_bg.jpg) center no-repeat fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.wrapper {
    padding-top: 30%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    z-index: 5;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 30px;
}
.push {
    height: 4em;
    background: #F00;
}
.footer {
    background:#dddddd;
    color:#9b9a9a;
    padding:10px 25px 10px 25px;
    overflow: hidden;
    clear: both;
}
 

Código HTML:

<div class="wrapper">
    
    <div style="float: left;">
       ...
    </div>
    <div class="...">...</div>
    <div class="...">
        ...
    </div>
    
    <div class="push"></div>
</div>
<div class="footer">
    ...
</div>
 

Al parecer la propiedad height: 100% del body ocaciona este tremendo espacio entre el wrapper y el footer.

El div push está de color rojo para poder distinguirlo y ver si funciona como debería.

Espero puedas seguir ayudandome :)

Iniciado por emprear

De comparar el código con las imágenes surge algo muy claro

#page no esta en top:45%
#page no tiene 80% de width, está al 100%
#page no tiene ningún height definido
y así varias cosas más, o tu css esta mal o las imágenes de referencia están mal, vas a tener que ser más preciso con tu planteo


Saludos

Gracias por el interés. Las imágenes de muestra las hice únicamente para explicar la superposición que ocurre entre un div y otro ya que tanto el ancho como la posición de #page no son el problema.

[cristian_cena]

Se que estamos en foro de css y me van a criticar por esto, pero a mi modo de ver encarar el problema de los footer pegadizos solo con css ensucia el html y css, en su lugar una buena alternativa me parece esta. Un plugin jquery que solo debes llamar sobre el elemento que deseas que sea tu footer pegadizo.
Antes que vengan a descargar la artillería contra el uso de librerías también decir que si tu proyecto no soporta el peso de jquery (en serio?) podes escribir tu propia función.

Desventajas de este método:
debes cargar una librería y un plugin
debes usar javascript, navegadores que lo tengan desactivado (0,000001% de los usuarios) no lo verán.
ventajas:
una linea de codigo y lo tenes hecho.
no ensucias el html
no escribis css extra

probalo:

Código HTML:

<!DOCTYPE HTML>
<html lang="es-es">
    <head>
        <title>Pie siempre abajo</title>
        <meta charset="UTF-8">
        <style type="text/css">
            header, nav, footer { background: #ccc; border: 1px dashed #707070; padding: 2em; }​         
        </style> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            // aisla este plugin en un .js externo
            var footer;
            jQuery.fn.extend({
                stickyFooter: function(options) {
                    footer = this;
                    function positionFooter() {
                        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                        if(docHeight < $(window).height()){
                            var diff = $(window).height() - docHeight;
                            if (!$("#sticky-footer-push").length > 0) {
                                $(footer).before('<div id="sticky-footer-push"></div>');
                            }
                            $("#sticky-footer-push").height(diff);
                            $("#sticky-footer-push").height(diff);
                        }
                    }
                    positionFooter();
                    $(window).scroll(positionFooter).resize(positionFooter);
                }
            });
        </script>
        <script type="text/javascript">  
            $(function(){ //ready
              $("footer").stickyFooter(); //llamas el plugin sobre el elemento que queres que sea el footer pegadizo
            })
        </script>
    </head>
    <body>
        <header>Header</header>
        <nav>
            <a href="#">item n</a><span> | </span>
            <a href="http://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-height-using-jquery" target="_blank">fuente: tutorial / explicación</a>
        </nav>
        <section>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </section>
        <footer>
            <div>margin-top</div> 
            <div>sticky footer, facil y limpio</div>
        </footer>
    </body>
</html>
 

saludos.

[kenproxd]

Muchas gracias cristian_cena! problema resuelto.