Div con altura variable segun la página.

[ferpoblaciones]

Hola, estoy creando un sitio web y me encuentro con el problema de tener varias páginas con distintas alturas debido al contenido, en algunas hay que hacer scroll vertical y en otras solo tienen 3 lineas de texto. Debajo del DIV contenido hay otro PIE. En las que hay mucho contenido el PIE queda muy por debajo, bien, pero en las que hay poco el DIV PIE se queda en mitad de la pantalla. Necesito que se desplaze hacia abajo al menos hasta la parte inferior del monitor.
Gracias.

[pzin]

Es un problema habitual. O normal. Del día a día vaya.

Tienes una solución aquí, que es más o menos la más extendida.

[ipraetoriux]

puedes hacer así, darle un height automático a la capa contenido para que se ajuste el alto según al contenido, pero ademas darle un min-height, es decir, indicarle que no importa la cantidad de contenido siempre tendrá un mínimo height y de ahí en adelante, cone so evitas que la web quede muy "cortita" en caso de haber poco contenido y que el footer te queda por la mitad de la pantalla

Código CSS:

#contenido{
height:auto;
min-height:500px;
}
 

[pzin]

Iniciado por ipraetoriux

puedes hacer así, darle un height automático para que se ajuste el alto según al contenido, pero ademas darle un min-height, es decir, indicarle que no importa la cantidad de contenido siempre tendrá un minimo height y de ahi en adelante

Código CSS:

#contenido{
height:auto;
min-height:500px;
}
 

No es una solución viable para el mundo real.

Primero, que todos los elementos tienen por defecto una altura automática. No es algo que haya que especificar, y si existe la posibilidad de hacerlo, es porque existen casos bastante concretos, extraños y raritos. Pero en este caso es redundante especificarlo y no sirve de nada.

No es viable, porque existen multitud de diferentes alturas según pantalla/dispositivo. Si se especifica una altura mínima, se verá bien en un tipo de resolución concreta, fallando en todas las demás.

[ferpoblaciones]

Iniciado por Bonez

Es un problema habitual. O normal. Del día a día vaya.

Tienes una solución [URL="http://www.cssstickyfooter.com"]aquí[/URL], que es más o menos la más extendida.

Esta solución no la entiendo :S

Iniciado por Bonez

No es una solución viable para el mundo real.

Primero, que todos los elementos tienen por defecto una altura automática. No es algo que haya que especificar, y si existe la posibilidad de hacerlo, es porque existen casos bastante concretos, extraños y raritos. Pero en este caso es redundante especificarlo y no sirve de nada.

No es viable, porque existen multitud de diferentes alturas según pantalla/dispositivo. Si se especifica una altura mínima, se verá bien en un tipo de resolución concreta, fallando en todas las demás.

Esto es cierto, a distintas resoluciones el efecto sera diferente, entonces ¿como decirle que ocupe el 100% de la resolucion vertical?

Gracias

[ipraetoriux]

Iniciado por Bonez

No es viable, porque existen multitud de diferentes alturas según pantalla/dispositivo. Si se especifica una altura mínima, se verá bien en un tipo de resolución concreta, fallando en todas las demás.

...señor "Mundo Real", el usuario no consulto sobre Responsive Design y como ajustar cada elemento según resolución y dispositivos...solo hizo una pregunta básica, y asumo que por lo que pregunto, no debe tener mucha idea, entonces me parece innecesario complicarle la vida con una respuesta mas compleja, por mas que sea mejor o peor...

[pzin]

Iniciado por ferpoblaciones

Esta solución no la entiendo :S

Tienes una explicación de su funcionamiento en español en la propia página: http://www.cssstickyfooter.com/es/us...r-code-es.html

[ipraetoriux]

Iniciado por ferpoblaciones

Esto es cierto, a distintas resoluciones el efecto sera diferente, entonces ¿como decirle que ocupe el 100% de la resolucion vertical?

Gracias

Pues usa porcentajes...Responsive Design, mirate este video https://mejorando.la/videos/tutorial-responsive-design/

[pzin]

Iniciado por ipraetoriux

...señor "Mundo Real", el usuario no consulto sobre Responsive Design y como ajustar cada elemento según resolución y dispositivos...solo hizo una pregunta básica, y asumo que por lo que pregunto, no debe tener mucha idea, entonces me parece innecesario complicarle la vida con una respuesta mas compleja, por mas que sea mejor o peor...

No tiene nada que ver con RWD. Que yo sepa las pantallas han tenido altura desde siempre.

La pregunta básica era cómo poner un pie de página al pie de la página aún cuando no haya contenido. Tu solución no es ninguna solución, sólo una chapuza para salir al paso. No tiene que ver con una respuesta sea mejor o peor. Es que la tuya directamente no sirve, ya que la pregunta no es "cómo pongo el pie de página al pie de la página en mi monitor".

Iniciado por ipraetoriux

Pues usa porcentajes...Responsive Design, mirate este video https://mejorando.la/videos/tutorial-responsive-design/

Y repito, no tiene nada que ver con el diseño web responsivo. Hay artículos muy viejos dando solución a este problema mucho antes de 2010.

[ipraetoriux]

Iniciado por Bonez

No tiene nada que ver con RWD. Que yo sepa las pantallas han tenido altura desde siempre.

La pregunta básica era cómo poner un pie de página al pie de la página aún cuando no haya contenido. Tu solución no es ninguna solución, sólo una chapuza para salir al paso. No tiene que ver con una respuesta sea mejor o peor. Es que la tuya directamente no sirve, ya que la pregunta no es "cómo pongo el pie de página al pie de la página en mi monitor".



Y repito, no tiene nada que ver con el diseño web responsivo. Hay artículos muy viejos dando solución a este problema mucho antes de 2010.

...no es ninguna chapuza, como veras el mismo usuario no entiende tu solución. Como te dije antes...hay que dar respuestas según el nivel de la persona que consulta...ahora si vos queres demostrar que sos la verdad absoluta y un top web developer, buenísimo por vos, te felicito (gracias Bonez por existir)...pero a los ademas que consultan cosas básicas no les sirve, necesitan resolver fácil y sencillo lo que preguntan

[pzin]

Iniciado por ipraetoriux

hay que dar respuestas según el nivel de la persona que consulta...

No. Hay que dar respuestas que resuelvan los problemas planteados. El tuyo no resuelve nada, crea otros problemas. No sé qué relación verás en que ferpoblaciones no entienda el enlace y que tu solución no sea apropiada.

Si pones un min-height con un valor de 500px como propones, ¿se verá el pie abajo en una pantalla de 1920*1080 a la vez que en una de 1024*768 y en una de 800*600? Evidentemente no. En resoluciones inferiores habrá un espacio vacío y el pie estará escondido detrás de un innecesario scroll. He ahí, lo que se suele llamar chapuza.

Si te duele o te ofende comprobar que tu solución no se puede calificar como tal, tendrías que haber comprobado o pensando primero cómo afecta min-height en diferentes escenarios. Porque para eso es un foro, para solucionar problemas y no crear otros.

Y a la pataleta de tu última frase no voy a entrar.

Si vas a contestar, hazlo en relación al segundo párrafo por favor, lo demás no es de interés para nadie.

[PIRRUMAN]

si tu estructura consta de dos div (uno de contenedor y otro de pie de pagina) podrias poner por ejemplo :

<div style="border:1px solid #000000;height:90%;">Contenedor</div>
<div style="border:1px solid #000000;height:10%;">Pie</div>

Repartir los height en porcentaje

[samty]

No se sí entendí el proble... Péro q les parece probar con did{overflow: hiedden;}