How to get a wrapper to fill 100% of a browser's height regardless of the
height of the enclosed content?
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?
No comments:
Post a Comment