CODEWITHSUNDEEP
htmlcss
Chris Schmitz
Chris Schmitz

Reputation: 20940

Body at 100% and min-height of 100% but content extends past browser screen

I know I've seen the solution to this issue but I can't find it for the life of me.

I've got the html and body elements extended to 100% of the dom. They also have a min-height of 100%. The problem is when my content extends past the bottom of the browser screen the body won't extend with it:

<!DOCTYPE html>
<html>
    <head>
        <title>Damn you body, extend!!</title>
        <style type="text/css">
            html,body{
                height     :100%;
                min-height :100%;
            }
            html{
                background-color:gray;
            }
            body{
                width            :90%;
                margin           :auto;
                background-color :white;
            }
            body > div{
                background-color :red;
                height           :50px;
                width            :80px;
                margin           :auto;
                text-align       :center;
            }
        </style>
    </head>
    <body>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
    </body>
</html>

I could have sworn the min-height would cause the body to extend to fit the content but I'm obviously wrong. Could someone point it out really quick??

Upvotes: 2

Views: 1740

Answers (3)

ashishmaurya
ashishmaurya

Reputation: 1196

This should work:

html,body {
  /* height: 100%; */
  min-height: 100%;
}

Upvotes: 2

user2424370
user2424370

Reputation:

Try removing the height property because you already set min-height property otherwise there may have conflict. Hope it helps!

Upvotes: 2

pzin
pzin

Reputation: 4248

Should work fine if you just set a min-height:

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

As you can see here: http://jsfiddle.net/7hg7m

Upvotes: 6

Related Questions