CODEWITHSUNDEEP
htmlcss
user656925
user656925

Reputation:

How does one create a div that extends to the bottom of the page?

If you notice the main page of twitter has a div that always extends to the bottom of the page. I inspected the CSS and it looked like they where using

min-height:100%

However, this did not work when I tested it in a jsfiddle here

How do I create a div that always extends to the bottom of the page?

Upvotes: 1

Views: 57

Answers (2)

khollenbeck
khollenbeck

Reputation: 16157

You can achieve this by using height:100%;. Also note, height 100% needs to be set to the parent container. In this case html,body { }

If html,body { } is not set to 100% then the container inside will only stretch 100% of it's container height.

http://jsfiddle.net/z5qVh/2/

 html,body {
        height:100%;
    }
    #all{
        height: 100%;
        background: #ff0000;
    }

Upvotes: 1

Hacknightly
Hacknightly

Reputation: 5164

You'll also want to ensure that your body and html have 100% height as well.

html, body {
  height: 100%;
}

Upvotes: 5

Related Questions