The latest approach to creating a layout with a full 100% height using HTML5 and CSS3

Question

The latest approach to creating a layout with a full 100% height using HTML5 and CSS3

After taking a break from coding websites, I've realized that HTML5 and CSS have introduced a lot of new features. I typically design sites with a fixed size header and footer, with the main content area in between. The default page should take up 100% of the window height, expanding the content area. If the content is lengthy, a vertical scrollbar will appear as usual.

<body>
   <table id="main" ...>
      <tr>
         <td id="header-and-content">
            <div id="header">contains logo, nav and has fixed height</div>
            <div id="content">actual content</div>
         </td>
      </tr>
      <tr>
         <td id="footer">
           fixed size footer
         </td>
      </tr>
   </table>
</body>

Previously, I achieved this layout with the following code:

html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }

However, it seems like this method is now considered obsolete. Can someone who is up to date on the latest markup techniques in 2011 provide some guidance?

UPDATE I understand the importance of semantic markup and using divs. However, my current issue is how to make the footer stay at the bottom of the page even when the content is empty or short. When the content is long, the footer should move down accordingly. Absolute and fixed positioning have not been successful solutions.

SUMMARY OF UPDATES:

I've experimented with using display:table and display:table-row, which seems to work: little content, more content
Andrej recommended the method outlined in Make the Footer Stick to the Bottom of a Page, which also works: little content, more content

Despite some success with these methods, I can't help but feel disappointed that the first method still relies on tables and the second method is quite old and hacky. I was hoping for some new, innovative solutions!

css html layout

Answer 1

Answer №1

Back in 2011, using tables for layout was outdated!

If it were up to me, I'd structure the markup like this:

<body>
   <div id="main" role="main">
        <header>
            (includes logo, nav, and fixed height)
        </header>
        <div class="content"> /*consider using <article> or <section> instead of div*/
            (actual content goes here)
        </div>
        <footer>
            fixed size footer
        </footer>
    </div>
</body>

The CSS would remain similar, with only the selectors being modified:

html, body { height:100% }
#main { height:100% }
footer { height:123px }

For a fixed footer, I recommend using position:absolute or position:fixed, depending on how you want it to behave (scroll with page or stay at the bottom).

To create a "sticky" footer that stays at the bottom of the page but moves with the content, you can follow this method.

Answer 2

Back in 2011, using tables for layout was outdated!

If it were up to me, I'd structure the markup like this:

<body>
   <div id="main" role="main">
        <header>
            (includes logo, nav, and fixed height)
        </header>
        <div class="content"> /*consider using <article> or <section> instead of div*/
            (actual content goes here)
        </div>
        <footer>
            fixed size footer
        </footer>
    </div>
</body>

The CSS would remain similar, with only the selectors being modified:

html, body { height:100% }
#main { height:100% }
footer { height:123px }

For a fixed footer, I recommend using position:absolute or position:fixed, depending on how you want it to behave (scroll with page or stay at the bottom).

To create a "sticky" footer that stays at the bottom of the page but moves with the content, you can follow this method.

Answer 3

Answer №2

As we step into 2013, a well-structured table with thead/tfoot/tbody sections still remains unparalleled.

Behold below a flawless HTML5 page with a fixed header and footer, ensuring 100% height and zero resizing issues.

<!DOCTYPE html>    
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / no CSS sizing hiccups</title>
<style type="text/css">

html, body, table { height:                 100% }    
th {                height:                 80px }    
#f {                height:                 40px }

table {             width:                  1000px }

html, body {        margin:                 0 }
table {             margin:                 0 auto }

td {                text-align:             left }      
html, body {        text-align:             center } /* crucial for older browsers */
th {                text-align:             right }

html, body {        background-color:       rgb(148,0,211) } 
#m {                background-color:       #f39 }

#m {                -webkit-border-radius:  25px;    
                    -khtml-border-radius:   25px;    
                    -moz-border-radius:     25px;    
                    -ms-border-radius:      25px;      
                    -o-border-radius:       25px;      
                    border-radius:          25px; }
</style>
<table>      
  <thead><tr><th>       head</th></tr></thead>
  <tfoot><tr><td id="f">foot</td></tr></tfoot>
  <tbody><tr><td id="m">main</td></tr></tbody>
</table>

Answer 4

As we step into 2013, a well-structured table with thead/tfoot/tbody sections still remains unparalleled.

Behold below a flawless HTML5 page with a fixed header and footer, ensuring 100% height and zero resizing issues.

<!DOCTYPE html>    
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / no CSS sizing hiccups</title>
<style type="text/css">

html, body, table { height:                 100% }    
th {                height:                 80px }    
#f {                height:                 40px }

table {             width:                  1000px }

html, body {        margin:                 0 }
table {             margin:                 0 auto }

td {                text-align:             left }      
html, body {        text-align:             center } /* crucial for older browsers */
th {                text-align:             right }

html, body {        background-color:       rgb(148,0,211) } 
#m {                background-color:       #f39 }

#m {                -webkit-border-radius:  25px;    
                    -khtml-border-radius:   25px;    
                    -moz-border-radius:     25px;    
                    -ms-border-radius:      25px;      
                    -o-border-radius:       25px;      
                    border-radius:          25px; }
</style>
<table>      
  <thead><tr><th>       head</th></tr></thead>
  <tfoot><tr><td id="f">foot</td></tr></tfoot>
  <tbody><tr><td id="m">main</td></tr></tbody>
</table>

Answer 5

Answer №3

For a more "modern" approach in the year 2016, I have an updated solution compared to my response in 2013:

Implement the 100vh technique in CSS3, where vh represents ViewPort height.

html, body {            height:                 100% } 
header {                height:                 100px }
footer {                height:                 50px }
main {                  height:                 calc(100vh - 150px); }

html, body {            width:                  100% }  
header, main, footer {  width:                  1000px }

html, body {            margin:                 0 }
header, main, footer {  margin:                 0 auto }

html, body {            padding:                0 }

html, body {            text-align:             center }

body {                  background-color:       white } 
header {                background-color:       yellow }
main {                  background-color:       orange }
footer {                background-color:       red }

<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>

If you need compatibility with older browsers, you can still refer to the code provided in my 2013 answer.

Answer 6

For a more "modern" approach in the year 2016, I have an updated solution compared to my response in 2013:

Implement the 100vh technique in CSS3, where vh represents ViewPort height.

html, body {            height:                 100% } 
header {                height:                 100px }
footer {                height:                 50px }
main {                  height:                 calc(100vh - 150px); }

html, body {            width:                  100% }  
header, main, footer {  width:                  1000px }

html, body {            margin:                 0 }
header, main, footer {  margin:                 0 auto }

html, body {            padding:                0 }

html, body {            text-align:             center }

body {                  background-color:       white } 
header {                background-color:       yellow }
main {                  background-color:       orange }
footer {                background-color:       red }

<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>

If you need compatibility with older browsers, you can still refer to the code provided in my 2013 answer.

Answer 7

Answer №4

In today's world, the way to accomplish this task is very similar to the past.

http://jsfiddle.net/5YHX7/3/

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

Additionally, the code would look like this:

<html><body><div></div></body></html>

Answer 8

In today's world, the way to accomplish this task is very similar to the past.

http://jsfiddle.net/5YHX7/3/

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

Additionally, the code would look like this:

<html><body><div></div></body></html>

Answer 9

Answer №5

Although using table tags to lay out a webpage may still work, it is now considered outdated and not recommended. It is better practice to utilize "semantic" web markup, which involves using tags for their intended purposes - for example, using a table tag for table data, rather than for design purposes. DIVs are meant for designing the layout of your webpage. A List Apart is a valuable resource for gaining a better understanding of these concepts.

If you are interested in learning more about semantic markup, check out this article: http://www.alistapart.com/articles/12lessonsCSSandstandards

For a sample page that demonstrates these principles, take a look at:

Answer 10

Although using table tags to lay out a webpage may still work, it is now considered outdated and not recommended. It is better practice to utilize "semantic" web markup, which involves using tags for their intended purposes - for example, using a table tag for table data, rather than for design purposes. DIVs are meant for designing the layout of your webpage. A List Apart is a valuable resource for gaining a better understanding of these concepts.

If you are interested in learning more about semantic markup, check out this article: http://www.alistapart.com/articles/12lessonsCSSandstandards

For a sample page that demonstrates these principles, take a look at:

Answer 11

Answer №6

When it comes to creating a design that is both "modern" and "compatible", one approach to consider is the grid method. While it may be seen as too modern at the moment, with some adjustments it could potentially be a solution worth exploring.

For a more in-depth understanding of this concept, you can check out this informative article: https://developers.google.com/web/updates/2017/01/css-grid

Although the code may appear visually appealing, the challenge lies in making sure it is supported by all browsers. To address this, additional measures may need to be implemented.

https://jsfiddle.net/qLcjg6L6/1/

<!DOCTYPE html>
<html>
<head>
<style>

html, body {
            height:             100%;
            min-height:         100vh;
            margin:             0;
            padding:            0 }

body {      display:            grid;
            grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
            grid-template-columns: 100% }

header {    background:         red }
main {      background:         pink }
footer {    background:         purple }

/* as this code is yet far from well-supported, here's a brute force... */
header {    height:             70px }
footer {    height:             60px }
main {      height:             calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */

</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>

Answer 12

When it comes to creating a design that is both "modern" and "compatible", one approach to consider is the grid method. While it may be seen as too modern at the moment, with some adjustments it could potentially be a solution worth exploring.

For a more in-depth understanding of this concept, you can check out this informative article: https://developers.google.com/web/updates/2017/01/css-grid

Although the code may appear visually appealing, the challenge lies in making sure it is supported by all browsers. To address this, additional measures may need to be implemented.

https://jsfiddle.net/qLcjg6L6/1/

<!DOCTYPE html>
<html>
<head>
<style>

html, body {
            height:             100%;
            min-height:         100vh;
            margin:             0;
            padding:            0 }

body {      display:            grid;
            grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
            grid-template-columns: 100% }

header {    background:         red }
main {      background:         pink }
footer {    background:         purple }

/* as this code is yet far from well-supported, here's a brute force... */
header {    height:             70px }
footer {    height:             60px }
main {      height:             calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */

</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>

Answer 13

Answer №7

Here is a suggestion to enhance your layout by incorporating 3 columns into your header, main, and footer sections:

http://example.com

<!DOCTYPE html>
<div>
    <header>
        <div id="header">
            <h1>Header</h1>
        </div>
    </header>
    <main>
        <div id="left">Column 1</div>
        <div id="center">Column 2</div>
        <div id="right">Column 3</div>
    </main>
    <footer>
        <div id="footer">
            <p>Footer</p>
        </div>
    </footer>
</div>

Answer 14

Here is a suggestion to enhance your layout by incorporating 3 columns into your header, main, and footer sections:

http://example.com

<!DOCTYPE html>
<div>
    <header>
        <div id="header">
            <h1>Header</h1>
        </div>
    </header>
    <main>
        <div id="left">Column 1</div>
        <div id="center">Column 2</div>
        <div id="right">Column 3</div>
    </main>
    <footer>
        <div id="footer">
            <p>Footer</p>
        </div>
    </footer>
</div>

Answer 15

Answer №8

There hasn't been any mention of the flex-box method yet

https://jsfiddle.net/55r7n9or/

<!DOCTYPE html>
<html>
<head>
<style>

html, body, div {
            height:         100%;
            margin:         0;
            padding:        0 }

div {       display:        flex;
            flex-direction: column }

main {      flex:           1 }

header {    background:     red }
main {      background:     pink }
footer {    background:     purple }

</style>
</head>
<body>
<div>
  <header>hdr</header>
  <main>main</main>
  <footer>foot</footer>
</div>
</body>
</html>

Answer 16

There hasn't been any mention of the flex-box method yet

https://jsfiddle.net/55r7n9or/

<!DOCTYPE html>
<html>
<head>
<style>

html, body, div {
            height:         100%;
            margin:         0;
            padding:        0 }

div {       display:        flex;
            flex-direction: column }

main {      flex:           1 }

header {    background:     red }
main {      background:     pink }
footer {    background:     purple }

</style>
</head>
<body>
<div>
  <header>hdr</header>
  <main>main</main>
  <footer>foot</footer>
</div>
</body>
</html>

The latest approach to creating a layout with a full 100% height using HTML5 and CSS3

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Scaling Youtube video backgrounds with Squarespace

Steps for displaying a div when clicking a link in the navigation

What is the best way to center images horizontally in CSS and HTML?

Deactivate the signup button automatically when the user is not present, without the need to refresh

Tips for updating the left positioning of a Div element on the fly

The inserted button's click event does not trigger the contentEditable DIV

Personalized scrollbar extends beyond the screen

Tips for showcasing div content on a separate line rather than inline within a collapsible <a> tag

The active tabs or placeholders do not update properly when I click on them

Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

What could be the reason for the unexpected invisibility of the 4px margin on a static div?

Implement a grid layout for columns within the profile section

Struggling to remove the image tag from the jQuery ajax response

Steps to launching a URL in a new window on Internet Explorer

Tips for utilizing string interpolation in the style tag of an Angular component

What is the best way to change styles in CSS for parent and child elements using selectors?

What could be the reason for the absence of the CSS destination folder being generated by

Display or conceal several elements using JQUERY/HTML upon hovering

Limit jQuery script to operate exclusively on a single page

New HTML5 feature enables users to upload images onto canvas, enabling them to drag, rotate, and even