5

Quiero lograr que mi pagina se mantenga siempre ocupando el 100% ancho y 100% alto. El problema lo tengo al hacer uso de las unidades vh y la clase "h-100" de BootStrap 4.

Cuando al row que tiene el contenido le digo "h-100" este me empuja el row que contiene el pie de pagina, generandome el scroll vertical.

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="Demo project">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>

<body>
  <div class="container-fluid bg-info" style="height: 100vh;">
    <div class="row bg-danger">
      <div class="col-12">HEADER</div>
    </div>

    <div class="row bg-success h-100">
      <div class="col">
        CONTENIDO
      </div>
    </div>

    <div class="row bg-warning">
      <div class="col-12">
        PIE DE PAGINA
      </div>
    </div>
  </div>
</body>

</html>

2 respuestas 2

3

El problema está en que tienes un div class=container-fluid que ocupa todo el alto de la pantalla y, en su interior, tienes otros tres:
div class=row bg-danger - Coge el alto automático según su contenido.
div class=row bg-success h-100 - Coge el 100% del alto del padre.
div class=row bg-warning - Coge el alto automático según su contenido.

Siendo más específicos, al 100% del padre le sumas el alto de la cabecera y el pie y, por lo tanto, la suma es superior a 100vh y se crea el scroll.

Si no me equivoco, las clases de Boostrap que se refieren a height están limitadas a 0%, 25%, 50%, 75% y 100%, por lo que tendrás que jugar con las clases y porcentajes para conseguir lo que quieres:

Como dato: No es recomendable usar estilos en línea, lo ideal es crear clases para el elemento a editar y hacerlo a través de un css externo. (Yo he usado las mismas clases que tenías, pero sería más recomendable hacerlo como phpMyGuel)

.container-fluid.bg-info {
  height: 100vh;
}

.row.bg-danger, .row.bg-warning {
  height: 10%
}

.row.bg-success {
  height: 80%
}
<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="Demo project">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>

<body>
  <div class="container-fluid bg-info">
    <div class="row bg-danger">
      <div class="col-12">HEADER</div>
    </div>

    <div class="row bg-success">
      <div class="col">
        CONTENIDO
      </div>
    </div>

    <div class="row bg-warning">
      <div class="col-12">
        PIE DE PAGINA
      </div>
    </div>
  </div>
</body>

</html>

2

#cabecera {
  height: 30px;
}

#contenido {
  height: calc(100% - 60px);
}

#pie {
  height: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="Demo project">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>

<body>
  <div class="container-fluid bg-info" style="height: 100vh;">
    <div id="cabecera" class="row bg-danger">
      <div class="col-12">HEADER</div>
    </div>

    <div id="contenido" class="row bg-success">
      <div class="col">
        CONTENIDO
      </div>
    </div>

    <div id="pie" class="row bg-warning">
      <div class="col-12">
        PIE DE PAGINA
      </div>
    </div>
  </div>
</body>

</html>

El problema lo tienes en que los vh hacen referencia a la altura del dispositivo. Si el .container-fluid lo tienes a height: 100vh y luego al contenedor del contenido le estás dando la clase h-100 lo que estás haciendo es que el .container-fluid mida: altura del header + altura del disposivo + altura del footer.

Para solucionarlo, podrías darle un tamaño fijo a los contenedores del header y del pie y luego el contenido hacer que tenga de altura el 100% de la altura de su padre (que es el .container-fluid con altura 100vh) y a eso restarle la suma de las alturas del contenedor del header y del contenedor del píe.

Para hacer eso la función calc() de CSS te viene al pelo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.