Reputation: 7185

css layout footer after screen height

I want to achieve something like this in CSS.

Header part should only take the required height for it.
Content part should fill the rest of the space. (This should be stretch to the bottom of the screen size)
Footer should start after the height of the screen size. (If someone needs to see the footer he has to scroll

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
         margin: 0;
         padding: 0;
        }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .wrapper {
          display: flex;
          height: 100vh;
          flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>
      <div style="background-color: darkgreen">Content goes here.</div>
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>
  </body>
</html>

This is what I have done. content section (green color) should fill up to the end of the 100vh.

How do I fix this? Any help! Thanks in advance. =)

Upvotes: 0

Answers (3)

gcrodrigues

Reputation: 11

You can set HTML and body height as 100% so the div.main can receive percentage values for its height. This must solve your problem.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html, body{
         height: 100%;
      }
      * {
          margin: 0;
          border: 0;
          box-sizing: border-box;
      }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .main{
          height: 100%;
      }
    </style>
  </head>
  <body>
    
      <header>
        <h1>Header</h1>
      </header>
      <div class="main" style="background-color: darkgreen">Content goes here.</div>
    
    <footer>
      <h1>Footer</h1>
    </footer>
  </body>
</html>

Upvotes: 1

User7007

Reputation: 361

You can use flex: 1 1 auto to get the content to take up remaining space. For example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
         margin: 0;
         padding: 0;
        }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .wrapper {
          display: flex;
          height: 100vh;
          flex-direction: column;
      }
      .content {
          background-color: darkgreen;
          flex: 1 1 auto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>
      <div class="content">Content goes here.</div>
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>
  </body>
</html>

Upvotes: 3

Paul K.

Reputation: 196

Just add flex-grow: 1 to the div with content :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
         margin: 0;
         padding: 0;
        }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .wrapper {
          display: flex;
          height: 100vh;
          flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>
      <div style="background-color: darkgreen; flex-grow: 1;">Content goes here.</div>
    </div>
    <footer>
      <h1 style="margin: 0;">Footer</h1>
    </footer>
  </body>
</html>

Upvotes: 3

css layout footer after screen height

Answers (3)

Related Questions