2

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??

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Chris Schmitz
  • 20,160
  • 30
  • 81
  • 137

3 Answers3

6

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

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

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

pzin
  • 4,200
  • 2
  • 28
  • 49
  • Right, that's what I thought it was. that's the first css rule declared in my example above. – Chris Schmitz May 12 '14 at 02:37
  • Ah, I see what it was. The hight and min-height were conflicting. I removed the height rule and it worked fine. Thanks! – Chris Schmitz May 12 '14 at 02:38
  • *You can eat minimum 2 apples* AND *You will eat 2 apples* So, if you are a good boy you will eat 2 apples in the end, neither 3, nor more. :-) – pzin May 12 '14 at 02:41
  • 3
    There's a specific combination of `height: 100%` and `min-height: 100%` for html and body that I recommend here, with an explanation: http://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements – BoltClock May 12 '14 at 02:47
2

This should work:

html,body {
  /* height: 100%; */
  min-height: 100%;
}
pzin
  • 4,200
  • 2
  • 28
  • 49
ashishmaurya
  • 1,196
  • 10
  • 18
2

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