CODEWITHSUNDEEP
htmlcssscrollbarmargindocument-body
Nick Gris
Nick Gris

Reputation: 174

HTML & CSS - Body Not Adapting Fully To Content?

I was trying to create a page effect, like a new document in your favourite wordprocessor.

If you paste the following into an HTML file and view it (for me, in the latest Chrome):

<!DOCTYPE html>
<html>
    <head>
        <title>Page Test</title>
        
        <style>
            body, html { 
                margin: 0px ; 
                background-color: darkgrey ; 
                
            }
            
            .page { 
                position: absolute ; 
                background-color: white ; 
                width: 2970px ; 
                height: 2100px ; 
                margin: 16px ; 
                
            }

        </style>
        
    </head>

    <body>
        <div class="page"></div> 
            
    </body>
    
</html>

you do indeed see the grey margin to the left and top - and you get scrollbars. But if you scroll fully right or fully down... you don't get the grey margin to the right and at the bottom.

I thought it was due to the scrollbars hiding it, but even with a 40 pixel margin you still see not a shred of it.

I even tried without position: absolute, leaving it as a full-width div in case there was something funny going on with absolute positioning... but no joy.

I expected the body to adapt to the content, margin and all. Have I misunderstood how this works?

Upvotes: -1

Views: 25

Answers (1)

Nick Gris
Nick Gris

Reputation: 174

If anyone else runs into this, a workaround - if you know the size of the content (in my case I make the page div a fixed size) - is to give the body a fixed size.

I can only guess that it doesn't consider margins to be part of the content that needs adapting to.

Note that if you wrap the page div in another div - which would normally expand to include those margins - but don't give that wrapping div a fixed size, or the body, you get the same problem - right and bottom margins chopped off.

Upvotes: 0

Related Questions