Best IT Recipes

<html> width is less than its background

I set the style to <html> :

 html { background: #ECECEC; border: 1px solid #FFFFFF; }

If the content of the page is larger than the page, why does the border stop, but the background continues to go?

Here is the fiddle that shows the problem: http://jsfiddle.net/rPGyc/3

+10
html css width
Jun 18 2018-12-18T00:
source share
3 answers

html is the correct block level element, like body , p , div , etc. - therefore, he observes all the same overflow rules as other elements of the block.

However, the reason the html background is past the border when the content overflows its width (or when its width is less than 100% of the browser window or viewport) is because the background color extends to the viewport, which is a canvas containing html and that's it its contents that are displayed. However, the border remains part of the html element, so the element does not expand when the content overflows. This behavior is very similar to how applying the background to the body , but not the html , causes the background of the body to propagate to the root element anyway, as described in this answer , which refers to this section of the specification .

As Alohci notes in the comment in the answer, the same goes for html in relation to the viewport:

Note that html behaves relative to the viewport in much the same way that the body behaves with respect to html, and the background goes beyond the html element. See http://jsfiddle.net/GmAL4/4/ to understand what I mean.

+6
Jun 18 2018-12-18T00:
source share

Here's a small fix using jquery

  $("html").width($(document).width()); $("html").css("border", "1px solid black");

I know this is lame, that only one css does not work fine, but at least we can get the desired result with jquery.

here is the fiddle: http://jsfiddle.net/rPGyc/5/

+2
Jun 18 2018-12-18T00:
source share

A way to prevent using the css3 word-wrap property. Jsfiddle here

Just add:

 html{ background-color: lightgrey; border: 1px solid #fff; padding:0px; margin:0px; width:100%; height:100%; /*The important bit*/ word-wrap: break-word; }
0
Jun 18 2018-12-18T00:
source share


More articles:


All Articles