How to make divs occupy full height

Question

Im making a website but i cant make the three column divs fill the whole page height, the divs are always adjusting to their content, i dont want them to adjust to their content, i want them to just fill the whole page.

When i write height 100% into .columna the three column layout breaks.

The code should also work with the header and the footer i made.

How can i make this work?

I insert snippet

body {
 margin: 0px;
 padding: 0px;
 height: 100%;
 position: relative;
 background-color: white;
 font-family: "Times New Roman", Times, serif;
}
#header {
 background: #828F89;
 text-align: center;
 height: 80px;
 margin: 0;
 position: relative;
 padding: 0;
}
#header h1 {
 margin-top: 0px;
}
.columna {
 float: left;
}
.izquierda, .derecha {
 background-color: grey;
 width: 20%;
 height: 100%;
}
.centro {
 background-color: lightgrey;
 width: 60%;
  height: 100%;
}
#footer {
 position: fixed;
 text-align: center;
 background: #828F89;
 height: 80px;
 width: 100%;
 bottom: 0;
 left: 0;
}

<!DOCTYPE html>
<html>
<head>
 <title>Proyecto Final CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <header id=header>
  <h1>Proyecto Final CSS Bootcamp</h1>
 </header>
 
  <div class="columna derecha">
   <p>Hola</p>
   <p>Hola</p>
  </div>
  <div class="columna centro">
   <p>Hola</p>
  </div>
  <div class="columna izquierda">
   <p>Hola</p>
  </div>
 </div>
 <footer id="footer">
 </footer>
</body>
</html>

How to make divs occupy full height

0 Answers0