CSS 100% Height with Absolute Positioning Top 0 Bottom 0

CSS 100% height with absolute positioning top 0 bottom 0

I am now using this as well, and was
wondering if there is any reason not
to?

This technique works fantastically in modern browsers - there is no reason not to use it.

(unless you care about some really old browsers (IE5/6?), which don't support setting top and bottom or left and right on the same element)

Here's an answer I wrote earlier today which uses a similar technique.

Set height 100% on absolute div

http://jsbin.com/ubalax/1/edit .You can see the results here

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}

Position absolute, with a bottom of 0 only works for a parent with a height of 100%

It's probably not working because you are absolutely positioning it to the bottom of the viewport. If you want to absolutely position it to the bottom relative to the parent element, in this case, the body element, add position: relative to the element:

html, body {  height: 200%;}body {  position: relative;}#bottom {  border: 1px solid black;  position: absolute;  width: 100%;  bottom: 0;}

<div id="bottom">bottom</div>

CSS: height:100% vs bottom:0

The height of the child element is determined differently for each property:

bottom: 0 =>
child_height = parent_height - child_margin - child_border

height: 100%=>
child_height = parent_height

In other words height: 100% set the inner height of the child to the same height of its parent, while bottom: 0 sets the outer height of the child to the same height of its parent.

example: http://jsfiddle.net/2N4QJ/1/

More info about position/dimension:
http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx

100% height <div> inside a fullpage div (top:0, bottom:0)

this is a bug in IE6 & IE7.. you need to set the outer div with fixed height for the inner div to behave properly.

change your CSS to something like this

<style>
#outer {
 position: absolute;
 top:0;
 bottom:0;
 right:0;
 left:0; 
 padding: 50px;
 background-color: #FEE;
 height:140px; /* notice the height is in pixels not % */
}
#inner {
 height:100%;
 background-color: #FDD;
}

things would start to work.. you can use javascript to identify the browser & apply the css accordingly.

Position element to the bottom of a height: 100% div

To fix this, give your html and body a height of 100% as follows. Right now they don't have a defined height set (so they are 0px high), so your button is technically already at the bottom.

Live Example:

html, body {  height: 100%;}
.sidebar {  height: 100%;  position: relative;  background-color: #CCCCCC; }.btn {  position: absolute;  bottom:0; }

<div class="sidebar">  <button class="btn">Button</button></div>

---

Related Topics