How to Make a `` Container Always Fill the Entire Screen?

How to Ensure a Full-Screen

Container Regardless of Content Size

Achieving a full-screen

container with varying content sizes can be challenging. However, there's a reliable solution that consistently delivers the desired result.

Solution:

The following HTML and CSS code ensures a consistently full-screen

container:

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        
        #wrapper {
            min-height: 100%; 
        }
    </style>



    <div>
<p><strong>CSS Breakdown:</strong></p>
<ul>
<li>html, body: Sets the height to 100% and removes any margin, ensuring the container occupies the entire screen.</li>
<li>#wrapper: Sets the minimum height to 100%, ensuring it will expand vertically to fit the screen, even if its content is small.</li>
</ul>
<p><strong>Compatibility:</strong></p>
<p>This solution works well in all major browsers, including IE. For optimal display in IE 6 or earlier, an additional CSS rule is included:</p>
<pre class="brush:php;toolbar:false"><!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

Usage:

Simply include the HTML and CSS code in your document, and any

element with the ID "wrapper" will expand vertically to occupy the full screen, regardless of its content size.