Home/ Questions/Q 6331063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:59:12+00:00

______________________ | Header | |______________________| | | | | | Content | | |

  • 0
 ______________________
|        Header        |
|______________________|
|                      |
|                      |
|        Content       |
|                      |
|                      |
|______________________|
|        Footer        |
|______________________|

I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don’t know the content height. I need to use the user frame to calculate.

The total height should be 100%.

Can I do it in pure CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using flexbox, this is easy to achieve.

    Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.

    Example markup:

    <div class="wrapper">
    <header>I'm a 30px tall header</header>
    <main>I'm the main-content filling the void!</main>
    <footer>I'm a 30px tall footer</footer>
</div>

    And CSS to accompany it:

    .wrapper {
    height: 100vh;
    display: flex;

    /* Direction of the items, can be row or column */
    flex-direction: column;
}

header,
footer {
    height: 30px;
}

main {
    flex: 1;
}

    Here’s that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left

    You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/

    Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    –[Old answer below]–

    Here you go: http://jsfiddle.net/pKvxN/

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  header {
    height: 30px;
    background: green;
  }
  footer {
    height: 30px;
    background: red;
  }
</style>
</head>
<body>
  <header>
    <h1>I am a header</h1>
  </header>
  <article>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
    </p>
  </article>
  <footer>
    <h4>I am a footer</h4>
  </footer>
</body>
</html>

    That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)

    • 0