I'm building some tests around height:100%.
On the THIS page you can notice the blue area doesn't stretch its height with the page content, even though it is assigned to have the CSS style of:
height:100%;
Any help on solving or trying to understand this behaviour?
Set height: auto on your body element,
body {
width: 100%;
font-family: sans-serif;
height: auto;
}
Update
Ok, wasn't aware it needs to be 100% despite lesser content.
What you can do is,
give your body some height (say 1000px). And then the 100% on your section will expand to 1000px.
PS: min-height won't work. You'll need to provide a height in px or em.
Although, I'm not very sure on why elements cant figure out 100% of 1000px and NOT 100% of 100%
If you want that section to always be 100% height, you could use min-height: 100% instead of height: 100%. If not, you'll have to give the parent a height (like the html), and then use height: 100%.
the theory behind the behaviour is that if you want to have an element filling the 100% height of a window, you have to make sure that parents of such element also fill 100% of the browser window .
The idea is clear, if you are setting 100% height, you have to ask: 100% of what exactly?
The answer is of a parent.
Of course, this applies to elements without the position: absolute or position: fixed which are not in the "flow" of the document.
An illustration of the problem is very clearly seen in my fiddle: http://jsfiddle.net/AVKnJ/
I hope it enlightens a bit.
EDIT:
is this the desired behaviour?
you indeed have to use height: 100% for containers (html, body) and min-height: 100% for the elements you expect to exceed the height of the window.
http://jsfiddle.net/7jDFD/15/
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
when I inspect my html element I find out that it is not taking 100 % of the browser view even if I am setting height to 100% in my css sheet.I test it with chrome and firefox and it is the same.The browser adds display:block to my html element could it be the reason?
it is not taking 100 % of the browser view
If you strictly want the element to take the height of the 'browser view', or viewport as it's called, simply do:
#element {
height: 100vh;
}
That sets the element to 100% the height of the viewport. Check this page for browser support info.
You didn't provide a code/example but my guess is that your html and body don't have the height: 100% as well. Try to add them to your css
html, body{
height: 100%;
}
Note that the height percentage refers to the element's parent, so if the element's parent is only 30% of the page for example, your element will be 30% too.
Make sure your HTML and Body are 100%;
body, html {
height: 100%
}
The most common reason I have found this happens is because you forgot to set height: 100% for both html and body elements.
Remember percentage is a relative unit and it can't work until it finds a parent that has declared absolute height/width. Also, if the parent has height/width set in percentage, that calculated value will be used as the basis for computing the percentage for children.
Also, while doing this, you might want to consider thinking about the box-sizing because if you set height as 100% and then apply margins and paddings to that element, it's gonna occupy more than 100% of it's parent's height.
Assuming your markup is like...
<html>
<body>
<div class="my-element"></div>
</body>
</html>
If you still wanna use percentage as length value, do.
html,
body,
.my-element {
height: 100%;
}
Or use the better length unit vh;
.my-element {
height: 100vh;
}
Read up more about vh here - https://developer.mozilla.org/en/docs/Web/CSS/length
Check browser compatibility here. - http://caniuse.com/#feat=viewport-units
While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?
html, body {
height: 100%;
}
or
html, body {
min-height: 100%;
}
Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?
If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:
html {
height: 100%;
}
body {
min-height: 100%;
}
My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.
The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.
For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.
You can use viewport height (vh) unit:
body {
min-height: 100vh;
}
It is relative to screen, not to parent height, so you don't need html height: 100%.
Can anyone explain to me why my HTML page is not filling the height of the screen? I tried to set the min-height in the css but it's not really affecting anything.
JSFiddle: http://jsfiddle.net/9yFKn/
It's because you're not accounting for the height of the body.
Just add
body{
height: 100%;
}
http://jsfiddle.net/9yFKn/1/
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100% but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
here is the solution too
I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}