How to get a wrapper
to fill 100% of a browser's height regardless of the height of the enclosed content?

Question

This question seems to have been answered a gazillion times in various forms but I still can't find an answer that works for me. Put simply, I have this layout:

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="body"></div>
        <div class="footer"></div>
    </div>
</body>

I want wrapper to be centered horizontally in the browser and for it to fill 100% of the browser's height. Each of the enclosed <div> elements has a fixed height that more often than not sum to a height that is greater than the browser window's height. If this is the case, I get the layout I want.

If, however, the browser window's height is greater than the combined height of the enclosed <div> elements (as is the case on an iMac or portrait iPhone orientation, for example), then the wrapper seems to stop with the end of the footer and the rest of the window below this is <body> background. The wrapper background and <body> background are different colours, so it is quite obvious that this is the case.

Does anyone have a CSS solution to this, so that the wrapper fills the browser height regardless of whether this height is greater or less than the combined height of the content?

EDIT: ANSWER:

The answer was a combination of the answers below and something that I happened upon just now: In the CSS, do this:

body, html {
    height:  100%;
    margin:  0px auto;
    padding: 0px auto;
}

.wrapper {
    height:     auto;       /* These two lines were the key. */
    min-height: 100%
    /*overflow:   hidden;*/ /* Do not use this, it crops in small browsers. */
    margin:     0px auto;
    padding:    0px auto;
 }

Benjamin · Accepted Answer

If you want to set a div height to 100%, you should set the height of html and body to 100% as well. Then you can add 100% to the div.

CSS

.wrapper {
border: 1px solid red;
height: 100%;
margin: 0px auto;
overflow: hidden;
}

body, html {
height: 100%;
}

Take a look at this jfiddle.

How to get a wrapper <div> to fill 100% of a browser's height regardless of the height of the enclosed content?

Tags:

html

css

height

Ed King

1 Answers

Benjamin

Recent Activity

Donate For Us