How to make this Header/Content/Footer layout using CSS?

by

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+)

More Related Contents:

  1. What is the difference between display: inline and display: inline-block?
  2. CSS Floating Divs At Variable Heights [duplicate]
  3. CSS selector based on element text? [duplicate]
  4. CSS @font-face not working with Firefox, but working with Chrome and IE
  5. Opacity of background-color, but not the text [duplicate]
  6. Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
  7. Sass Variable in CSS calc() function
  8. Is it possible to include one CSS file in another?
  9. Downloading a Google font and setting up an offline site that uses it
  10. How to display list items as columns?
  11. Should I use ‘border: none’ or ‘border: 0’?
  12. How to style a div to be a responsive square? [duplicate]
  13. Background Image for Select (dropdown) does not work in Chrome
  14. How to change btn color in Bootstrap
  15. How to make a element expand or contract to its parent container?
  16. Defining Variable Variables using LESS CSS
  17. Webpack “OTS parsing error” loading fonts
  18. How to hide scrollbar in Firefox?
  19. How to auto adjust the height according to content in it?
  20. Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
  21. What is the difference between block and inline-block with width: 100%?
  22. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  23. Font weight turns lighter on Mac/Safari
  24. Using “word-wrap: break-word” within a table [duplicate]
  25. Why adds extra top margin?
  26. IE not rendering CSS properly when the site is located at networkdrive
  27. CSS width 100% OR max-width in pixels
  28. Using SVG as background image
  29. What is the difference between background-size: cover; and background-size: 100%;?
  30. Are alternate nested styles possible in CSS?

Leave a Comment