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
Related
I'm attempting to expand my body tag to full browser height to fully display background color. I understand there are some solutions that suggest using html tag height of 100% and body tag with height of 100% or min-height of 100%.
I have found a solution (below) that has achieved the same result by specifying a min-height of the full view port and this works on different browsers. Could I use this as an alternative solution? If any, what are the disadvantages of this solution? Please provide some supporting evidence.
body {
background-color:#ea7400;
height: 100%;
min-height: 100vh;
}
#Josethehose provided a comment directing me to useful information on my question. See min-height in vh vs % for body?
While my solution did work, I don't believe it is the optimal solution because it uses unnecessary code.
Explanation:
The html, and body tags don't have default heights and can be sized relative to their parent elements. The hierarchy is Viewport > HTML > Body. The actual size of the browser screen is Viewport, so specifying the height: 100% for the html tag will ensure it is the full height of its parent element or the Viewport. The height: 100% can be coupled with the body tag to achieve full height of the parent element or the html tag which is inherited from the Viewport.
The optimal solution would be:
html,
body {
height: 100%;
}
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
I'm trying to expand the body's height to be beyond 100% of the page.
If i set
body, html { height: 100%;
background-color: darkbrown; }
.container { height: 100%; }
then if the content inside container goes beyond 100% it overflows and the color isnt saved. The problem here is that unless I remove the height or change it to min-height it will continue this behavior. What can I do to change this? Keep in mind that setting height % is necessary to create sticky footer.
Here's a fiddle with a better expample:
http://jsfiddle.net/hfqGu/1/
ive tried setting overflow to auto but with no avail.
Remove height:100% specified for the body tag.
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/