Menu
I've set a style on <html>:
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
If the contents of the page are wider than the page, why does the border stop, but the background keep going?
Here's a fiddle that show the problem : http://jsfiddle.net/rPGyc/3
435
You should set body and html to position:fixed; , and then set right: , left: , top: , and bottom: to 0; . That way, even if content overflows it will not extend past the limits of the viewport.
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
html is a proper block-level element, just like body, p, div, etc — it therefore observes all the same overflow rules as other block elements do.
However, the reason why the background of html bleeds past its border when content overflows its width (or when its width is less than 100% of the browser window, or viewport), is because the background color is propagated to the viewport, which is the canvas containing html and all its contents that are rendered. The border remains part of the html element, however, so the element doesn't expand when the content overflows. This behavior is very similar to how applying a background to body, but not html, causes the body background to propagate to the root element anyway, as described in this answer which cites this section of the spec.
As Alohci notes in a comment under the answer, the same applies to html with respect to the viewport:
Note that html behaves with respect to the viewport in much the same way as body behaves with respect to html, with the background escaping beyond the confines of the html element. See http://jsfiddle.net/GmAL4/4/ to see what I mean.
188
Here's a little fix using jquery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
I know it's lame that css alone don't seem to work fine but at least we can have the wanted result with jquery.
here'S the fiddle : http://jsfiddle.net/rPGyc/5/
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
