Geek Answers Handbook

HTML / CSS: Why is the body not stretched to its contents?

Take this trivial example and open it:

<html>
    <body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
        <div style="width: 8000px; border: 3px solid red;">Demo</div>
    </body>
</html>

The page is made so that the body has a background image with a top center and containing an element that overflows the borders of the windows, so there is horizontal scrolling (if you have a monitor with a width of more than 8000 pixels, then you are really cool, please make the window smaller and refresh) .

The problem is that for some reason it <body>does not stretch to contain <div>. It just remains the same width as the viewport, and <div>overflows it. This, in turn, causes the background to center in the wrong place and unload it in the size of the viewport. Very ugly when you scroll to the right.

I have already found a solution to this problem, but I wonder WHY is this so? It seems to be compatible with browsers as well. But, in my opinion, this is completely counter-intuitive and mostly incorrect. The container element should be large enough to contain its children - unless they are absolutely not located, of course, in this case they do not participate in the layout calculations.

+5
source share
2 answers

, ; (1) , . (2) ; (wrt parent). CSS ( paddings, , ), , , .

, , - CSS:

, HTML "HTML" "html" XHTML, "transparent" "background-color" "none" "background-image", HTML "BODY" "" XHTML . , , .

, "" , <body> .

(1), , float position: absolute width.

(2), , height/overflow.

+8

. , - div table (, display: table-cell ) - .

+1

More articles:


All Articles