Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Completar altura de página

Estas en el tema de Completar altura de página en el foro de CSS en Foros del Web. Buenas, Estoy desarrolando una página bastante sencilla que consta de un header, un slider y un footer. El problema es que en pantallas altas queda ...
  #1 (permalink)  
Antiguo 04/02/2016, 07:27
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 14 años, 7 meses
Puntos: 8
Completar altura de página

Buenas,

Estoy desarrolando una página bastante sencilla que consta de un header, un slider y un footer.
El problema es que en pantallas altas queda un espacio en blanco al final ya que no cubre la totalidad del alto de ésta.

Lo que quiero hacer es que el footer (contenedor negro) cubra el alto de la página restante.
He probado con el típico height: 100% tanto en body como en footer pero no tengo resultado alguno. Espero puedan ayudarme. Las propiedades actuales del footer son las siguientes:

Código CSS:
Ver original
  1. footer {
  2.     background: #1a1a1a;
  3.     display: flex;
  4.     padding: 65px 45px 45px 45px;
  5. }
  6. .logo2 {
  7.     width: 30%;
  8.     background-image: url('../images/logo-2.png');
  9.     background-position: center center;
  10.     background-repeat: no-repeat;
  11. }
  12. footer > p {
  13.     width: 70%;
  14.     font-family: 'Arial';
  15.     font-size: 21px;
  16.     color: white;
  17. }

Además aclarar que no esta dentro de ninguna otra etiqueta.

  #2 (permalink)  
Antiguo 04/02/2016, 13:39
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 4 meses
Puntos: 39
Respuesta: Completar altura de página

No se porque dices el tipico height: 100% sí este no funciona casi nunca.

Si te sirve de algo investiga sobre el modelo de caja Flexbox o usa medidas relativas al tamaño total de la ventana ejemplo: 10vh, siempre va a ser el 10% del alto total, sin importar que medida tenga el padre contenedor
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #3 (permalink)  
Antiguo 05/02/2016, 09:27
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 14 años, 7 meses
Puntos: 8
Respuesta: Completar altura de página

Gracias por tu respuesta,
el problema es que tanto el header como el slider tienen alturas fijas en pixeles. Felizmente logré solucionar el problema usando jquery. Dejo el código por si le ayuda a alguien:

Código Javascript:
Ver original
  1. var resizear = function() {
  2.         alturaW = $(window).height();
  3.         posicionFooter = $('footer').offset().top;
  4.  
  5.         alturaN = alturaW - posicionFooter;
  6.  
  7.         if (alturaN > 300) {
  8.             $('footer').css('height',alturaN);
  9.         }
  10. }
  11.  
  12. $(document).ready(function() {
  13.     resizear();
  14. });
  15. $(window).resize(function() {
  16.     resizear();
  17. });
  #4 (permalink)  
Antiguo 05/02/2016, 11:03
Avatar de mbm150  
Fecha de Ingreso: enero-2013
Ubicación: Muskiz
Mensajes: 79
Antigüedad: 11 años, 2 meses
Puntos: 21
Respuesta: Completar altura de página

Hola

si los elementos superiores tienen alturas fijas, podrias hacerlo con css.

No se como lo tienes montado pero seria algo asi.

Código CSS:
Ver original
  1. html, body{
  2.   position: relative;
  3.   overflow: hidden;
  4.   width: 100%;
  5.   height: 100%;
  6.   margin: 0px;
  7. }
  8. #wrapper{
  9.   position: relative;
  10.   height: 100%;
  11.   overflow: auto;
  12.   background-color: yellow;
  13. }
  14. header, main{
  15.   height: 50px;
  16. }
  17. footer {
  18.     background: #1a1a1a;
  19.     display: block;
  20.     padding: 65px 45px 45px 45px;
  21.     box-sizing: border-box;
  22. /*En esta funcion hay que restarle al 100% la altura del resto de elementos y margenes, en este caso solo son los dos elementos superiores de 50px*/
  23.     height: calc(100% - 50px - 50px);
  24. }
  25. .logo2 {
  26.     width: 30%;
  27.     background-image: url('../images/logo-2.png');
  28.     background-position: center center;
  29.     background-repeat: no-repeat;
  30. }
  31. footer > p {
  32.     width: 70%;
  33.     margin: 0px;
  34.     font-family: 'Arial';
  35.     font-size: 21px;
  36.     color: white;
  37. }

Si pruebas esto en un archivo deberia funcionar.

Saludos.
__________________
Juego del Ahorcado

Etiquetas: altura, background, color, completar, página, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:20.