Height percentage using divs

Question

I am having trouble with divs and percentages. I do not understand how to expand or set the divs so it would be the full size of the screen. It is stuck at the top of the browser when I view it. What do I do?

HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BasicArchitect</title>
        <link rel="stylesheet" type="text/css" href="style.css"
        </head>
       <body>
       <div id="container">

       <div class="header">

       </div>

       </div>

      </body>
      </html>

CSS
    body{
        height:100%;
        width:100%;
        margin: 0;
        padding: 0;
}
    #container{
        height:90%;
        width:100%;
        margin:auto;
        background-color:white;
        border-style: solid;
}
    .header{
        height:50%;
        margin:auto;
        background-color: red;
        border-style: dashed;
}

It worked. Thank you very much. Can you explain why I needed to add html{height:100%;}? — jonmo1990, Apr 30 '17 at 22:58

score 0 · Answer 1 · answered Apr 30 '17 at 22:42

0

Sizing the body to height: 100% doesn't really do anything unless if you set html's height to 100% as well. The measurement you are looking for is Viewport Height, or vh for short.

You want to replace body { height: 100% } with body { height: 100vh }

answered Apr 30 '17 at 22:42

Slava Knyazev

5,377
1
22
43

score 0 · Answer 2 · answered Apr 30 '17 at 22:54

Aside from percentages, you can use viewport units like vh and vw

body {
  margin: 0;
  padding: 0;
}

#container {
  height: 90vh;
  margin: auto;
  background-color: white;
  border-style: solid;
}

.header {
  height: 50vh;
  margin: auto;
  background-color: red;
  border-style: dashed;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>BasicArchitect</title>
  <link rel="stylesheet" type="text/css" href="style.css" </head>

  <body>
    <div id="container">

      <div class="header">

      </div>

    </div>

  </body>

</html>

Height percentage using divs

2 Answers2