14

I have been struggling to understand this scenario

I have set, in CSS

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

So that when there is no content on the page, the html and body take 100% of the height of page. And if there is content in body, these should change their height according to content height.

But when I add some content on the page (enough to display scroll bar), html and body are not taking 100% height of the document. i.e. if my screen height is 700px, in either case $('body').height() would return 700px;

Why is that?

EDIT: In other words, I want my body Tag to be at least 100% of screen but it should grow if content is added.

U.P
  • 7,357
  • 7
  • 39
  • 61
  • I don't know the answer, but have you tested this in all browsers? – tay10r Jun 01 '13 at 09:34
  • Hmm, come to think of it, I may have been to quick. The question is "Why", not how to make things 100%. Apologies. – Jeroen Jun 01 '13 at 09:48
  • I can't reproduce your Jquery behaviour. See http://jsfiddle.net/VEsXm/1/ – Alohci Jun 01 '13 at 10:18
  • @Alohci in your fiddle, if you remove all the

    tags, the height is then 0. I want the height to be as big as viewport

     – U.P Jun 02 '13 at 12:05
  • @TaylorFlores yes, I tested it in Chrome, Firefox and IE10 – U.P Jun 02 '13 at 12:06
  • @UmarP - If your question is what to do about it, see the answers of the linked question to which this is a duplicate. If your question is why doesn't your code work, see Jeroen's answer. – Alohci Jun 02 '13 at 12:16
  • The question is probably not a duplicate - it seems that the OP wants to have the height of body equal not to browser window but to that of the document - which should happen by default unless... the content of the body is floated. So, short answer, remove the float. – lucian Aug 07 '15 at 05:09

2 Answers2

13

I've misread the question at first, but on second thought I'd interpret it as:

The html element ignores min-height: 100%.

Why is that?

The answer to "Why" is in the relevant spec, emphasis mine:

min-height

...

Value: <length> | <percentage> | inherit

...

<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

This is why you need to set a height for the html element for min-height to work on the body element. Alternatively you can position the html element absolutely, like this:

html { border: 10px solid black }
body { border: 10px dashed red }

html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }    
/* alternatively: html { min-height: 100%; height: 100%; } */    

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

See the position: absolute demo or the height: 100% demo.

Thanks to @Alohci for correcting me on the interpretation of the spec.

Community
  • 1
  • 1
Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • Right bit of the spec, but I'm not sure that the interpretation is correct. I think min-height does have an effect of the html element (try putting a border around it with and without min-height). But since the height of the html element is not specified explicitly, min-height will have no effect on the *body* element. – Alohci Jun 01 '13 at 10:02
  • Use border, not background color. background-color is misleading because it gets applied to the viewport as well. See http://jsfiddle.net/HxzjD/1/ vs http://jsfiddle.net/PE8Bc/1/ – Alohci Jun 01 '13 at 10:23
  • @Alohci You're very right. I've removed my comment, and tried to update my answer according to your comment. If you feel you can improve or clarify it feel free to edit my answer. – Jeroen Jun 01 '13 at 10:50
  • So I have been reading your answer and trying to understand and finally I know what's wrong and what should I do to fix it. the trick is html { min-height: 100%; height: 100%; }. Thanks – U.P Jun 02 '13 at 12:17
  • I believe having {min-height:100%; height:100%;} is redundant, is it not? – Bruno Torquato Jan 08 '14 at 19:57
1

In the case you describe, html and body do take up 100% of the screen height. Add a background-color to see this:

body {
    background-color: lightblue;
}

You'll see the entire screen is now coloured. The jquery statement you're getting .height() from is still only returning the height of the content, not being stretched to the height of the screen. When you have a scrollbar, .height() of body will return the height of all the content, not just the visible area. You can get the height of the window with $(window).height(). See this fiddle for a demo.

Richard
  • 29,854
  • 11
  • 77
  • 120
  • I believe I could not convey my question properly, this is not what I was looking for. BTW, Jeroen's answer helps So I have accepted his answer – U.P Jun 02 '13 at 12:20