I tumbled upon this question here
I am not clear of how html and body elements behave.
Look at the answer,
He put the height of the body and html to 100%
which helped him solve his answer,
How did that happen?
please help me.
One problem is that html and body have height:auto by default, which is rather hard to do calculations with. I mean, what is 50% of auto? So, those calculations fail.
And even if you can know the height the body, that is, look at the resulting height after it has been rendered, it's still not the same as the height of the screen. Example:
html {background:lime}
body {background:black; color:white}
This is the body
See? body is only one line high. So any child of body that you set to height:100% will still be as high as its parent.
Therefore the solution is to set both html and body to height:100%, which will give them the same height as the window.
Related
This might be a silly question. However, I couldn't find the exact reason for this question. Whenever I set 100% to width and height of a div it doesn't take this behaviour but when I set the width and height of the Html and body elements to 100% then the div with 100% size works perfectly. What is the reason behind it? Thanks in advance :)
Just ask yourself: 100% of what? The answer is: 100% of the parent element, which in many situations is the body, whose parent again is the HTML tag.
I'm curious what is the purpose of html, body{width:100%} in the css file? Is it kind of css reset code?
Disabling this piece of code doesn't affect on what I see in the browser. Is it a "bugfix" for some old browser or for mobile devices? Am I missing something?
Could anybody please explain?
Thank you.
As far as I know, width:100% is used when you want a block-level element to fill any remaining space inside it's parent or when an element is inheriting a set width value that you want to override. But in most cases it is unnecessary or will bring undesirable results.
As far I know it's not necessary maximum time, some time not mentioning this is creates problem with IE browser by improper formatting of the content. otherwise there is no need.
Understand it this way.
HTML is parent of BODY.
BODY is parent of the content.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set.And since the content of body will probably need to change dynamically. Setting min-height of the body to 100% makes that happen.
If we are using overflow:hidden with body and the body isn't able to take the height of dynamic content then the part outside the body height won't be visible .
Now the question is
When doesn't the body take the height of the dynamic content ?
When we are using floating elements .The height of the floating elements are not calculated by the parent until we use overflow:auto.
When looking at other people's code (or many CSS resets), I see the html element addressed with basic styling (like height: 100%) and sometimes I see it ignored completely. In my experimentation there is no difference, but I am not sure if I am missing something.
In this post they give the example of
html,body{
min-height: 101%;
}
to keep scrollbars visible (but no other definitive answer). Other than a hack like this, is there any specific reason to style the html element?
Well the major reason i can think of is that, for specifying height in % the elements parent needs to have a height set explicitly.
Assume you've a container <div> which you need to be of 100% height and responsive. simply applying height:100% won't work unless you specify a height for it's parent <body>.
Hence we'll apply height:100% for the <body> - Now, this won't work since <body>'s parent doesn't have a height set explicitly - which is our <html> element.
Hence we apply
html{
height:100%;
}
...!
This is not required if your design is not responsive , i.e if you're setting fixed dimensions in pixels
This is used for making height:100% relative to the viewport height.
As I understand it, it is the html element that displays scrollbars. So if you don't want to display scrollbars at all for some reason you would need to hide overflow on that element.
More information about the html element here
I'm trying to implement Sticky Footers, but when I go to set the height of html, body, the surrounding asp.net form, then check in Firebug, they are clearly not expanding to 100%. Can anyone explain why these are coming up short?
My page:
http://www.craftonhills.edu/Current_Students/Student_Life/Clubs/Badminton_Club.aspx
Thank for your time.
You also have to set height 100% on <div id="container" class="container_12"...> or another suitable enclosing element.
I have set the body and html to height:100% and I have set the element to Height:100% and the div is only contained in html and body, nowhere else.
Yet when displaying the element is 100% of the browser window height not the site height which is scrollable. I'm sure the answer is simple but I can't think of a reason why it is like that :/
You set the body height to 100% of the screen height, which is why it won't scroll.
The inner element at 100% will inherit 100% of the screen size.
try removing the height of the body and use px for the element until you develop more content on the site.
If you are still looking (or more likely, somebody has found this via google), I achieved what I think you are after here:
http://www.facebookanswers.co.uk/code/fullheight/demo2.htm
Its a self contained file, IE all the CSS is there with the markup, so you should be able to see what is going on.
The full article is here:
http://facebookanswers.co.uk/?p=312
Basically, its a layout where the footer stays at the bottom of the window (thanks to the 100% div) until the content is more than the window, in which case it scrolls with the content.