Home/ Questions/Q 7406729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:36:06+00:00

I want to setup a simple website structure with a header, content, and footer.

  • 0

I want to setup a simple website structure with a header, content, and footer. The header and footer are set sizes, with the content expanding to fill the extra white space. The site should also enforce a minimum size of 800×600. This works fine without a DOCTYPE specified but once I add the content section doesn’t expand.

Here’s my code. Remove the DOCTYPE to see it work appropriately. This code only works for Chrome.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="min-width: 800px; min-height: 600px;margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1.0; background-color: gray;">
    <div style="height: 50px; background-color: red;">Header</div>

    <div style="background-color: yellow; -webkit-box-flex: 1.0;">Content</div>

    <div style="height: 50px; background-color: blue;">Footer</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    html and body won’t occupy the full viewport unless you specify it so you need to…

    html, body {
  height: 100%;
}

    This will fix your problem. But I must confess I have no idea why removing the doctype achieves the same effect.

    • 0