entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Div no ajusta bien la altura

Si aplico este código al footer:

html
{
    position: relative; 
    min-height: 100%;
}
body
{
    margin: 0 0 65px;
}
footer
{
    width: 100%;
    bottom: 0;
    position: absolute;
    height: 65px;
}

El footer, siempre se mantendrá al final de la página, excepto si no cabe, que entonces quedara oculto y habrá que hacer scroll para poder visualizarlo.

Esto funciona, pero el problema viene cuando en el main o section, añadimos un div que ocupe el espacio sobrante, imaginemos que tenemos un header de un tamaño, un nav de un tamaño, un footer de un tamaño especifico, pero la parte central main, desconocemos el tamaño porque se va adaptando al tamaño de la pantalla y el dispositivo, si sabemos la altura en pixeles no hay problemas, pero delimitas su tamaño a una resolución y dispositivo en concreto, pero si pones una unidad relativa como el % entonces el alto del div se retinge automáticamente al tamaño del contenido es decir si el contenido es una linea de párrafo el div ocupara de alto exactamente eso y el footer aparecerá aislado abajo.

Yo lo que quiero es que independientemente del contenido del div, siempre ocupe el espacio faltante para rellenar la pantalla dejando el footer abajo y si ocupa más del tamaño de la pantalla entonces que el footer se esconda y quede inmediatamente debajo del ultimo elemento.

A ver si alguien me puede ayudar con esto. Gracias

x4mp73r comentado Oct 3, 2016

¿Y si al footer no le pones una altura, solo colocas autoo min-height?

bichomen comentado Oct 4, 2016

Hola, pongo un enlace al código en acción:

http://codepen.io/bichomen/pen/Zpajzv

En el ejemplo que he puesto se ve claramente como el texto "Hola Mundo" que esta en el section aunque le indique un height de 100% solo ocupa la altura del texto, dejando entre el footer y el texto un espacio en blanco.

En el ejemplo que he puesto hay animaciones integradas, pero en principio eso no tendría que afectar a que el section se cargue al completo.

1 Respuesta

3votos

Leonardo-Tadei Puntos210010

Hola @bichomen,

para conseguir que el SECTION ocupe todo el alto de la pantalla, tenés que agregarle un

position: fixed;

Acá el código

Saludos cordiales!

PD: perdón por el amarillo furioso, pero era para ver bien al elemento.

bichomen comentado Oct 4, 2016

Hola @Leonardo-Tadei he estado revisando tu código y tu código tiene trampa, le has quitado toda la animación al section, si añado la animación entonces carga, pero el footer se escode por debajo de pagina y el scroll no funciona

Peter comentado Oct 4, 2016

@bichomen convierto todas tus respuestas en comentarios. Las respuestas son solo a la pregunta inicial y los comentarios las respuestas a lo que te ponen. Si pones respuestas, solo tu recibes las notificaciones, porque las ones como respuestas a tu pregunta, entonces lo que tienes que poner son comentarios.

Saludos.

bichomen comentado Oct 4, 2016

Hola @Peter tienes razón como veía siempre abajo el campo de respuesta, daba por sentado que le respondes a el, ahora me he fijado en los campos de Inapropiado y Responder

Gracias y disculpas

bichomen comentado Oct 4, 2016

Hola @Leonardo-Tadei ya encontré el problema y creo que se puede cerrar ya el tema, cuando el contenido del section, más la suma del header, nav y footer y junto con las animaciones es mayor al screen del navegador, entonces el section deja abajo al footer (escondido) y como el section esta fijado, no se puede hacer scroll, pero si la suma del section, header, nav y footer y junto con las animaciones es menor al screen del navegador, entonces funciona de maravilla.

Solución: en las páginas que el contenido es mayor al screen, poner position: relative; y en las que contenido es mejor que el screen poner position: fixed;

De esta manera funciona, si alguien encuentra una solución mejor le agradecería que me lo indicada. Gracias a todos :-D

Leonardo-Tadei comentado Oct 4, 2016

Hola @bichomen,

saqué a propósito tu animación, porque en tu pregunta decís en tu ampliación a la pregunta que "en principio eso no tendría que afectar"... ;-)

Una solución más elegante a tu problema es que SECTION tenga un margin-top igual al alto de la barra superios y un margin-bottom igual al pie de la página. De esta forma el scroll no te daría ese problema cuando el contenido ocupa más que el alto disponible.

Saludos cordiales!

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta