mantener el footer en la parte de abajo

Citar

Escrito el 13 Feb 2013 07:50 pm

Hola, bueno les cuento que estoy aprendiendo sobre html y css....para mejorar mis conocimientos decidi hacer mi pagina personal www.jardineselectricos.com. Tengo un problema y es que en la seccion proyectos el contenido nunca alcanza para mandar el footer abajo, pero yo quiero que este todo el tiempo abajo. Alguna sugerencia?....les adjunto el codigo html y css. Muchas gracias por su ayuda.

Código HTML :

</section>
        <footer>
            <h4>Creado por Jhonnatan Gonzalez Rodriguez - <span>2013</span> - Todos los derechos reservados ©</h4>   
        </footer>

************ css ***************

Código CSS :


footer 
{   
   height: 4em;
   background: #EFEFEF;
   border-top: 3px solid #DBDBDB;
   color: #A5A5A5;
   margin-top: 1.5em;
   padding: .6em 0;
   text-shadow: 1px 1px 0 rgba(219,219,219, 1);
}

Por xtatanx

26 de clabLevel

Envíale un mensaje privado Email Web

artista, web, diseño

Citar

Escrito el 13 Feb 2013 09:29 pm

Lo mas sencillo pon un mi-height a contenido

Código CSS :

#contenido {
margin: 0 auto;
width: 84.7%;
min-height: 350px;
}

Pero siempre va a depender del tamaño de la ventana del usuario.
Si quieres controlar eso, sería posicionar el footer con js

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 13 Feb 2013 09:52 pm

Guaaaaaa justo ha sido d emuchisima utilidad tu consejo, con la ayuda de los media queries he y el min-height he logrado que se vea bien en casi cualquier dispositivo el footer

MUCHISIMAS GRACIAS!

Por xtatanx

26 de clabLevel

Envíale un mensaje privado Email Web

artista, web, diseño

Citar

Escrito el 26 Feb 2013 12:38 am

Hola comunidad, recien estoy trabajando con Twitter Bootstrap y quiero posicionar mi footer en el fondo cuando estoy por ejemplo en la pagina 404 que no rellena el alto de la ventana.
Estuve analizando la solucion que dieron en las respuestas anteriores, pero no me convence del todo. He tratado de hacer algo de 'magia' usando jquery, pero no me resulta si por ejemplo tengo ventanas que se pueden cerrar y que desplazarian el contenido hacia arriba, quedando descubierta la partde de abajo del footer.
Si alguien tiene alguna solucion que involucre preferentemente solo HTML y CSS se los agradeceria.

Saludos
P.

Por pmolina88

74 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Ingeniero en Sistemas

@pmolina088

Citar

Escrito el 26 Feb 2013 12:27 pm

Supongo que lo que buscas es lo que se llama "Sticky footer".

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 26 Feb 2013 02:31 pm

No, ya revise esa página pero no me funciona, pues la idea que dan ahi es teniendo un footer de alto fijo y yo necesito que sea variable.

Por pmolina88

74 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Ingeniero en Sistemas

@pmolina088

Citar

Escrito el 26 Feb 2013 02:35 pm

Encontré esta solución que me funcionó, incluso le hice algunas modicifaciones e igual me sirvió.
Espero les ayude.

Código HTML :

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            display: table;
            height: 100%;
            width: 100%;
            background: yellow;
        }
        .content {
            display: table-row;  /* height is dynamic, and will expand... */
            height: 100%;        /* ...as content is added (won't scroll) */
            background: turquoise;
        }
        .footer {
            display: table-row;
            background: lightgray;
        }
    </style>
</head>
<body>
    <div class="wrapper">
    <div class="content">
        <h2>Content</h2>
    </div>
    <div class="footer">
        <h3>Sticky footer</h3>
        <p>Footer of variable height</p>
    </div>
    </div>
</body>
</html>

Por pmolina88

74 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Ingeniero en Sistemas

@pmolina088

Citar

Escrito el 26 Feb 2013 02:36 pm

A mi me ha funcionado muy bien aquello del min-height, lo que he hecho es mediante las media queries ajustarlo para que en las distintas pantallas se vaya viendo bien. Un saludo!

Por xtatanx

26 de clabLevel

Envíale un mensaje privado Email Web

artista, web, diseño

Citar

Escrito el 26 Feb 2013 02:48 pm

Bueno, esa pudiera ser una solucion, sin embargo con esta que pongo en mi respuesta anterior no es necesario hacer mas nada con los media-queries. Verás, yo uso TwitterBootstrap y estoy haciendo un template responsive y me funciona de lo mejor para cualquier dispositivo.

Saludos
P.

Por pmolina88

74 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Ingeniero en Sistemas

@pmolina088

Citar

Escrito el 11 Feb 2014 12:01 am

pmolina88 escribió:

Bueno, esa pudiera ser una solucion, sin embargo con esta que pongo en mi respuesta anterior no es necesario hacer mas nada con los media-queries. Verás, yo uso TwitterBootstrap y estoy haciendo un template responsive y me funciona de lo mejor para cualquier dispositivo.

Saludos
P.

Por cali

0 de clabLevel

Envíale un mensaje privado

mantener el footer en la parte de abajo

Escribe una respuesta rapida