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.
Related
I have unintentionally been learning HTML in quirks mode, now that I have put <!DOCTYPE html> tag in, it's throwing off what I've learnt so far. At this point I'm struggling to understand using percentages for heights and when to use VH...
Here is a fiddle, along with some questions: https://jsfiddle.net/kittenslayer123/q9dm1zmu/4/
My goal and thought process:
1.Have body wrap around multiple sections - so I set body's min-height:100%
2.Each section is to be 100% of window - so I set .section height: 100vh
Each section should initially be 100vh but expand to wrap around contents - in this case .section-child.
I want section to be 100vh and expand depending on content (section-child) - The way I set it, the 3rd section-child overflows onto the next section.
Can I set .section height to 100vh without using vh?
Why is my .section not expanding? even though I have set min-height:100vh
I am really struggling to understand why or how to achieve this.
Your section is not expanding because there is nothing in it. Once you fill it with content it will expand (granted that it exceeds 100vh)
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 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 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.
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.