how to use full height of webpage

user_16272771 0
Viewed 85

I am trying to use the full height of the webpage. However, it only uses like 40% of the webpage's height. So, I looked up online and it said that I should use HTML, body {height: 100%}. So I used HTML, body {height: 100%} but it doesn't work. I tried to give 20% to header, 70% to section, and 10% to footer. However, I didn't do it because if I do that, my text won't vertically center. How can I do it?

<style>
    * {
        box-sizing: border-box;
        border: 0;
    }
    
    html, body {
        height: 100%;
    }


    header{
        background-color: blue;
        padding: 30px 0;
        text-align: center;
        font-size: 30px;
    }
     

    section {
        display: flex;
       
    }
   
    nav, article {
        border: solid 1px black;
        clear: both;
        background-color: aqua;
    }

    nav {
        flex: 1;
        padding: 20px;
        background-color: darkslateblue;
    }

    article {
        text-align: center;
        padding: 10px;
        flex: 4;
    }

    footer {
        border: solid 1px black;
        background-color: crimson;
        padding: 10px;
        
        text-align: center;
    }
</style>
</head>
<body>

<header>hello!</header>
<section>
    <nav>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
        </ul>
    </nav>
    <article>
        <h2>hello</h2>
        <p>hello how are you?</p>
    </article>
</section>
<footer>this is footer</footer>
 </div>
</body>
</html>
css html
4 Answers

Use the vh relative unit. vh stands for Viewport Height and can be used like so:

html,
body {
  height: 100vh;
}

This will tell the browser to use 100% of the viewport height. There is also a vw, which controls the width relative to the viewport.

Read more on relative units on the MDN page.

I'd recommend using CSS Grid Layout to create your layout. Combine it with the 100vh to first make your layout full height, and then divide the elements within it by creating a grid.

Look at the example below, specifically the CSS part. In there you see grid-template-rows where we define three rows of 20%, 70% and 10% height. Thats, 20, 70 and 10 percent of the 100vh to divide.

With grid-template-areas we can name our rows and columns. Later on we need to tell the grid children where in the grid they are supposed to go. By naming our cells, we only have to reference the name of the cell at each child (see grid-area in the CSS).

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-rows: 20% 70% 10%;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
  height: 100vh;
}

.grid-header {
  grid-area: header;
  background-color: blue;
}

.grid-main {
  grid-area: main;
  background-color: aqua;
}

.grid-footer {
  grid-area: footer;
  background-color: crimson;
}
<body class="grid">
  <header class="grid-header"></header>
  <main class="grid-main"></main>
  <footer class="grid-footer"></footer>
</body>

Alternatively you could divide your three main sections into 20vh, 70vh and 10vh sections.

user_116196470
user_135740700

Set the heights for the header, section and footer with height: ...vh.

vh is the shortcut for viewport height.

...
header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
    background-color: blue;
    padding: 30px 0;
    font-size: 30px;
}

section {
    height: 70vh;
    display: flex;  
 }

footer {
    height: 10vh;
    border: solid 1px black;
    background-color: crimson;
    padding: 10px;       
    text-align: center;
 }
...
user_159437680

I think adding a wrapper would solve the problem! The final code is like below:

<style>
  * {
      box-sizing: border-box;
      border: 0;
  }
  
  .wrapper {
      display: flex;
      height:100%;
      flex-direction: column;
  }

.wrapper > *{
  display: flex;
  flex:1;
}
  header{
      background-color: blue;
      padding: 30px 0;
      text-align: center;
      font-size: 30px;
  }
   
  nav, article {
      border: solid 1px black;
      clear: both;
      background-color: aqua;
  }

  nav {
      flex: 1;
      padding: 20px;
      background-color: darkslateblue;
  }

  article {
      text-align: center;
      padding: 10px;
      flex: 4;
  }

  footer {
      border: solid 1px black;
      background-color: crimson;
      padding: 10px;
      
      text-align: center;
  }
</style>
</head>
<body>
<div class="wrapper">
<header>hello!</header>
<section>
  <nav>
      <ul>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
      </ul>
  </nav>
  <article>
      <h2>hello</h2>
      <p>hello how are you?</p>
  </article>
</section>
<footer>this is footer</footer>
</div>
</body>

user_40381250
Related