Why does JSFiddle (and also the other JS playgrounds I tried) do present Scrollbars when setting the width and height style of body and html element to 100%? A simple example on JSFiddle. This wouldn't happen on a "pure" site.
Is there a way to solve this without overflow hidden? I need this to present a specific problem where that matters. Do you know of any alternatives where this works correctly?
Most browsers add a margin to the document by default, which causes the overflow at 100%;
Add this style:
html, body {
margin: 0;
}
Related
I wanted to implement a sticky footer that will be pushed to bottom if content is less.
I have gone through various posts in this website and could see that two popular solutions (without flexbox) uses either
html, body
{
height: 100%;
}
OR
html
{
position: relative;
min-height: 100%;
}
I am posting only the parts of the solution which I did not understand. Posting my doubts here. Please help me to understand these solutions
(a) as stated, first solution uses 100% height for html and body. But what is 100% height here? Is it refers to the height of view port or height of the entire document?
(b) in first solution, If 100% height refers only to view port height, isn't it required to make the setting to min-height instead of height because if document is larger than the view port, restricting to 100% height is not relevant.
(c) I know we make a element relative so that its child absolute/relative elements gets position from it. But what is the meaning of making html relative as it has only document as its parent?
(d) also, from your experience is there any better solution (without flexbox)? Similarly there are many posts with respect to issues in mobile browsers while using such solutions (like ios8 issue when using 100vh). Whether these solutions have any such issues?
My html knowledge is very much limited. thanks for help.
Note: both solutions are working fine and giving sticky footer as required
A)
The html and body tags do not fill the entire window by default, so that code forces to be 100% of screen even when inside content is less.
Without:
With 100%:
B)
You can get away with having the <body> as 100% because the content inside by default will overflow and the <html> tag has overflow:auto on by default.
So, the following works, but the content will overflow the <body>
html, body {
height: 100%;
}
A better solution would be one of the following:
html, body {
height: 100%;
}
body {
overflow: auto;
}
Or
html{
height: 100%;
}
body {
min-height: 100%;
}
Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}
I'm working on a website that have pages that exceed 100% browser window height and ones that do not. So, what I need is the height to be at least 100% but higher if applicable.
My current CSS looks like:
html, body {
min-height: 100%;
height: auto;
}
This initially seemed to work fine but then I realized that <body> does NOT have the same height as <html> but rather seems to use the standard height. It is like <body> does NOT respect the min-height property.
Hopefully, someone can toss some ideas or shine some light on this.
UPDATE1 It seems like HTML is acting as if it was default too..
UPDATE2 http://jsfiddle.net/rpz4rd4c/5
UPDATE3 According to the suggested comment by ( MichaelHarvey ) the body height is relative to the html height ( not min-height ) if that was true the following code should work:
html {
min-height: 100%;
height: auto;
}
body {
height: 100%;
}
However, it doesn't.
FINAL UPDATE
The solutions provided on this page "work" however they might be buggy with JS plugins. I would recommend people to use 100vh solution or the one I accepted as answer ( mainly because it requires no CSS3 ). I guess a 100% accurate solution to a problem like mine (having all dividers and elements 100% non-related to browser window) would be to simply use inline CSS and use min-height at longer pages and a height at browser fitting ones. This might require some JS.
<3
This seems to work with Chrome:
html {
height: 100%;
}
body {
min-height: 100%;
height: auto;
}
http://jsfiddle.net/rpz4rd4c/10/
Of course, this means the html element never takes the full child's height (only the viewports). Hopefully that's not an issue.
Viewport units to the rescue! The vh unit in CSS works relative to viewport height regardless of parent elements and all that fuss. Here's the CSS you should put on the body:
body{
min-height:100vh;
margin:0;
}
See http://jsfiddle.net/rpz4rd4c/3/ for my working example
EDIT: for your other elements that also need to be at least 100% height, just add min-height:100vh to their CSS styling as well. Thanks #misterManSam!
Without really understanding the why, perhaps this is what you're looking for?
html:
<html>
<body>
<div class='wrapper'>
<div class='inner'>
<!-- your content here -->
</div>
</div>
</body>
<html>
css:
html,body{
height:100%;
overflow:hidden;
}
.wrapper{
height:100%;
overflow:scroll;
background:#f9f9f9;
}
The html and body are always 100% height, and no matter what the content length it will still scroll. Not sure on the side effects of locking the html/body scrolling (lots of potential issues) however, so I'd be wary.
Example: http://codepen.io/jessekernaghan/pen/GocHg
I know there's a lot of questions on this type of thing, but I haven't found one that answers my question. I have a "news feed" format site where you can filter the posts based on certain criteria. So, with some filters, you get content much taller than the browser window. With other filters, you can get no content.
When I use Webkit's Web Inspector, I see that an html {min-height:100%} does the trick for the <html> tag. I want the <body> to do exactly the same thing: be 100% when the content fits on the page, and expand otherwise.
However, I can't use a percentage height or min-height on the body when the height isn't set for <html>. It doesn't inherit a height to base its percentage off of. So what I end up with when the document has less than a full window of content is everything getting clipped off right and the foot of that content, which screws up my background and stuff.
Any ideas?
Maybe you can try something like this:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
min-height: 100%;
}
I hope this helps solve the issue
From the limited details it sounds like all you need is to add is:
html,body{ height: 100%; }
And I am guessing that your background is on the body tag.
My suggestion is to set the height of the body to 100%. 100% means, that it should take equally much space as its parent element. So, if your html tag does what it's supposed to, just let the body tag take the same size:
<html style="min-height: 100%">
<body style="height: 100%">
</body>
</html>
I have a Silverlight video player that I want to display in a "100% browser width/height" mode (i.e. not fullscreen, but filling up the entire browser display area).
Regular player: http://play.nimbushd.com/lfu53b5
Fullscreen version: http://play.nimbushd.com/lfu53b5/fullscreen
I have tried nearly every node in the DOM and set width/height to 100%, with margin: 0px, padding: 0px. Seems to work great in Firefox. Why, then, does IE display a vertical scrollbar with a little whitespace at the bottom?
Edit: Since this issue is fixed, the short explanation: A 100% height/width Silverlight control within an ASP.NET <form> tag spills over just a bit in IE because of the form tag.
This behavior is caused by inline elements within the <form> - inline elements always render a line-height worth of pixels. Any of the following CSS rules will fix it:
form { font-size: 0; }
or
form * { display: block; }
Alternatively, you could try to get rid of all inline descendants of <form> (this includes text nodes) - but I'm not sure it would actually work (not tested). Plus it would render your markup hard to maintain (you'd need to strip all newlines and such... could be done during deployment, but I think this is taking it too far).
You need this this styling in you html:
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {margin: 0px}
</style>
Note that this applies a style to both html and body to enforce the height of html element to the viewport height and therefore also the body.