How do I force a div element to extend to the bottom of the page?

Question

I have been playing with CSS height property for a while, but I still can't find a solution.

This is my CSS:

html{
    height: 100%;
}
body{
    margin:0px; 
    padding:0px; 
    min-height:100%;
}
#container{
    position: relative;
    padding:40px;
    margin-top:2%;
    background-color:rgba(0, 0, 0, 0.7);
    margin-bottom:2%;
    height:auto;
}

Is there a way to fix this using CSS or may I use a javascript function?

Set as `position: absolute; height: 100%`. It will fit the window height; — LcSalazar, Jun 02 '14 at 20:42
Perhaps this question & my answer [here](http://stackoverflow.com/questions/23399396/why-add-block-level-to-pseudo-element/23399736#23399736) can help you. — webketje, Jun 02 '14 at 20:57

score 1 · Answer 1 · answered Jun 02 '14 at 20:57

If what you are trying to accomplish is to create an overlay that extends to the bottom of the page, try changing the position property to fixed and set the height to 100%.

#container {
    position: fixed;
    height: 100%;
    /* other CSS properties */
}

score 0 · Answer 2 · answered Jun 02 '14 at 20:49

You can try setting height:100% to the body as well. Or you can use inherit feature,so it varies with the html height.

html
{
  min-height: 100%;
  height:100%;
}

body{
 margin:0px; 
 padding:0px;
 height:inherit;
} 

#container{
  background-color:rgba(0, 0, 0, 0.7);
  height:inherit;
  border:1px solid #333;
 }

Please check in fiddle: http://jsfiddle.net/rw99a/

How do I force a div element to extend to the bottom of the page?

2 Answers2