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.
Related
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.
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.
There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:
<div style='height:100%'>
How high is 100%? 100% of what?
[EDIT]
Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.
100% of the parent container's height.
See here: http://jsfiddle.net/6VRn6/
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.
The height:100% means :
Make that div big as the parent!
It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:
{--parent loop
{
..height 100% of above loop
..
}
}
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.
I'm trying to make a div's height stretch out to 100% but everything I have tried has failed.
I HAVE looked around the web for solutions on this, and have tried every single one, yet I am still doing something wrong.
Here is my code: http://jsbin.com/elijuh/3/edit
Output: http://jsbin.com/elijuh/3
I have made every other div above the div, I want to stretch to also adjust to 100% which is what everyone on the Google is suggesting, but still nothing.
The two divs I'm trying to adjust is quick_analy_main and quick_analy_graph.
I know it is probably really easy to do, but I can't figure it out.
Can someone tell me where I've gone wrong please.
I think I fixed the issue: http://jsbin.com/elijuh/13/edit
When you set height to 100%, you always have to ask the question "100% of what?". It's always the height of the parent, so what is the parent in this case? It all bubbles up to the body element here. So what is the body set to? Nothing. Set it to 100% and see what happens. But html must also have a height set because it is the parent of the body.