[SOLUCIONADO] Completar altura de página

[kenproxd]

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:

footer {
    background: #1a1a1a;
    display: flex;
    padding: 65px 45px 45px 45px;
}
.logo2 {
    width: 30%;
    background-image: url('../images/logo-2.png');
    background-position: center center;
    background-repeat: no-repeat;
}
footer > p {
    width: 70%;
    font-family: 'Arial';
    font-size: 21px;
    color: white;
}
 

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

[g3kdigital]

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

[kenproxd]

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:

var resizear = function() {
        alturaW = $(window).height();
        posicionFooter = $('footer').offset().top;
 
        alturaN = alturaW - posicionFooter;
 
        if (alturaN > 300) {
            $('footer').css('height',alturaN);
        }
}
 
$(document).ready(function() {
    resizear();
});
$(window).resize(function() {
    resizear();
});
 

[mbm150]

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:

html, body{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px;
}
#wrapper{
  position: relative;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}
header, main{
  height: 50px;
}
footer {
    background: #1a1a1a;
    display: block;
    padding: 65px 45px 45px 45px;
    box-sizing: border-box;
/*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*/
    height: calc(100% - 50px - 50px);
}
.logo2 {
    width: 30%;
    background-image: url('../images/logo-2.png');
    background-position: center center;
    background-repeat: no-repeat;
}
footer > p {
    width: 70%;
    margin: 0px;
    font-family: 'Arial';
    font-size: 21px;
    color: white;
}
 

Si pruebas esto en un archivo deberia funcionar.

Saludos.