2

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>
umklapper
  • 105
  • 1
  • 1
  • 5

4 Answers4

3

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.

Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • He alsos want to set the height for the footer, header and main content. So he will also need to use `vh`for doing that. – Franco Pan Jun 23 '21 at 18:39
  • @FrancoPan gotcha! I've added a snippet which solves this. – Emiel Zuurbier Jun 23 '21 at 18:49
  • Wow thank you so much. Do you have any idea how you can put vertically and horizontally centered

    in the blue area (.grid-header)? when I put text-aling: center, it only centers horizontally

     – umklapper Jun 23 '21 at 19:47
0

You should use this code for the body:

body {
    margin: 0;
    height: 100vh;
}

You can learn more about units here: https://www.w3schools.com/cssref/css_units.asp

blazej
  • 927
  • 4
  • 11
  • 21
  • I don't think that's the problem here. I think they want the footer at the bottom. – Moritz Mahringer Jun 23 '21 at 18:38
  • So he can just use `100vh` for `section`. Then the footer will be on the bottom of the page – blazej Jun 23 '21 at 18:43
  • But that will make the whole page larger than the viewport. It will scroll vertically even though the content would fit without scrolling. – Moritz Mahringer Jun 23 '21 at 18:52
  • Yeah, that's right, so use can use smaller value insted. – blazej Jun 23 '21 at 18:53
  • Thank you very much for your help! However, do you have any idea how you can put vertically and horizontally centered

    in the blue area? when I put text-aling: center, it only centers horizontally –

     – umklapper Jun 23 '21 at 19:49
0

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;
 }
...
Marci
  • 302
  • 5
  • 12
  • Thank you for your help! However, do you have any idea how you can put vertically and horizontally centered

    in the blue area? when I put text-aling: center, it only centers horizontally –

     – umklapper Jun 23 '21 at 19:48
  • No problem. Yes to center your

    vertically use align-items: center; to center horizontally use justify-content: center; and then you must set your header to display: flex; I have the code updated in the answer.

     – Marci Jun 23 '21 at 21:20
0

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>
FMoosavi
  • 150
  • 1
  • 11
  • Thank you so much! However, do you have any idea how you can put vertically and horizontally centered

    in the blue area? when I put text-aling: center, it only centers horizontally –

     – umklapper Jun 23 '21 at 19:48