How to make a <div> always full screen?

html css responsive
Mask picture Mask · Nov 12, 2009 · Viewed 430.1k times · Source

No matter how its content is like.

Is it possible to do this?

Answer

Adam Harte picture Adam Harte · Nov 12, 2009

This always works for me:

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

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

This is probably the simplest solution to this problem. Only need to set four CSS attributes (although one of them is only to make IE happy).

Related questions

How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More
100% width background image with an 'auto' height

I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to …

Read More
Fit website background image to screen size

I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to. I wanted to make my website background fit any screen size in width, height does not matter. This is …

Read More