How to Make a `` Container Always Fill the Entire Screen?-CSS Tutorial-php.cn

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:

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

Copy after login

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]-->

Copy after login

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!

Previous article：How Can I Extract the Rotation Value from an Element's CSS Transform Using jQuery? Next article：Why Doesn't `:first-child` Select My H1?

Statement of this Website

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

Latest Issues