Posted: Mon Dec 08, 2008 6:03 am How to achieve 100% height (tutorial)
A lot of people want 100% height but most times they want more than 100% height!
What they usually want is an element such as a navbar that will stretch 100% down the side of the page and keep stretching even when the document is longer than the page.
The easiest way to accomplish this is to use a small bg image for the column colour and repeat it down the y-axis of the body on the left hand side. In this way the column appears to extend forever and is a simple solution that works in nearly all browsers.
Code:
body {
padding:0;
margin:0;
background:#ffc0cb url(leftcolbg.jpg) repeat-y left top;
color: #000000;
}
The above image is 150px wide and 5px high. It is repeated on the left side of the body and will form a column that is as long as the viewport or as long as the document if greater than viewport. A border can be added to the repeated gif to give the illusion of a continuous border. You could also add a screen fade effect for a more interesting column colour.
The background is tiled quite quickly and the image is small enough not to make much difference to page weight.
Another way to achieve 100% height without background images is to use the following techniques. (This doesn’t work for ie5 mac and a few other minor browsers.)
The first thing we need is 100% height to work with and this must be declared in the html element and the body element to satisfy various browsers. While we’re there we will set padding and margins to zero so they don’t influence our design.
We also need to hide this from ie5 mac users so use the commented backslash hack.
The next important step is to create a whole page wrapper that will hold everything else on the page. This outer element is set to 100% height for IE browsers and 100% min-height for mozilla browsers. IE6 and under treat height as min-height anyway but mozilla needs to be specific.(IE7 now implements min-height and the correct version of height so treat it like firefox when using this method.)
We also then need to set mozilla to height auto so that it doesn’t remain at 100% only but will expand as required. This height auto needs to be hidden from <=IE6 and is the only real hack in this code. (The star (universal) selector hack is good for passing values to only <=IE6 browsers.)
Code:
#outer{min-height:100%;background:#ffffcc}
* html #outer{height:100%;}/* ie6 and under*/
While the code achieves 100% height and allows for the element to expand it does have some drawbacks.
The container element (#outer) is the only element that will inherit the 100% properly so you have to keep everything inside this element. The element will only expand when content inside it expands it past the bottom of the viewport. A lot of people expect it to expand automatically to the document length or the length of longer elements on the same page. When you think about it this can’t really happen unless all elements are wrapped inside this 100% element.
As mentioned above you can only have one of these elements on your page because inner elements will not inherit from the 100% min-height and default to height auto. (Of course IE6 and under may in some circumstances apply 100% height on inner elements but it is not guaranteed and not advisable because it does not work in other browsers.)
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
