html – container that does not exceed 100% height

Question:

I want to make my page always occupy 100% width and 100% height. The problem I have is when I make use of the vh units and the class "h-100" of BootStrap 4.

When I say "h-100" to the row that has the content, it pushes the row that contains the footer, generating the vertical scroll.

<!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 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link 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>

Answer:

The problem is that you have a div class=container-fluid that occupies the entire height of the screen and, inside it, you have three others:
div class=row bg-danger – Get auto-height based on its content.
div class=row bg-success h-100 – Get 100% of the height of the parent.
div class=row bg-warning – Get auto-height based on its content.

Being more specific, to 100% of the parent you add the height of the header and footer and, therefore, the sum is greater than 100vh and the scroll is created.

If I'm not mistaken, the Bootstrap classes that refer to height are limited to 0%, 25%, 50%, 75%, and 100%, so you'll have to play around with the classes and percentages to get what you want:

As data: It is not recommended to use inline styles, the ideal is to create classes for the element to be edited and do it through an external css . (I have used the same classes that you had, but it would be more advisable to do it as 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 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link 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>
Post Views: 5
Scroll to Top