Home >Web Front-end >CSS Tutorial >How to Make a `` Container Always Fill the Entire Screen?

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

Susan SarandonOriginal: 2024-12-07 14:00:22919browse

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:

<head>
    <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>
</head>

<body>
    <div>

CSS Breakdown:

html, body: Sets the height to 100% and removes any margin, ensuring the container occupies the entire screen.
#wrapper: Sets the minimum height to 100%, ensuring it will expand vertically to fit the screen, even if its content is small.

Compatibility:

This solution works well in all major browsers, including IE. For optimal display in IE 6 or earlier, an additional CSS rule is included:

<!--[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.

The above is the detailed content of How to Make a `` Container Always Fill the Entire Screen?. For more information, please follow other related articles on the PHP Chinese website!

css html if for include this display margin

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Extract the Rotation Value from an Element's CSS Transform Using jQuery?Next article：How Can I Extract the Rotation Value from an Element's CSS Transform Using jQuery?

See more

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

Related articles