CODEWITHSUNDEEP
htmlcss
AEngineer
AEngineer

Reputation: 152

Html div border goes outside viewport

OK This seems really basic, but I can't seem to find an answer, maybe my search terms have been too general?

I have defined a top-level div that has a border round it, I want this to be the maximum size of the viewport.

This is the code in its most basic form

<body>
    <div id="main">
            test
    </div>
</body>

And the CSS:

#main {
    position:absolute;    
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    border: 1px green solid;
}

See this JSFiddle:

http://jsfiddle.net/GpBS5/11/

The Div should have a 1px green border which is visible, but it always seems to have the bottom and right just off the display needing a scrollbar.

Upvotes: 1

Views: 5741

Answers (2)

Johannes
Johannes

Reputation: 67768

There's a default margin on the body. Add this to reset it to 0:

html, body {
  margin: 0;
}

PLUS: Add box-sizing: border-box;to your #main DIV.

http://jsfiddle.net/gqL1zqeo/1/

Upvotes: 0

Chris Happy
Chris Happy

Reputation: 7295

Use box-sizing: border-box

JSfiddle

The width and height of the div is 100% + 2px (2 borders, a pixel each), which requires scrollbars. box-sizing: border-box fixes this because it tells the browser to included the padding and border in the width and height.

I almost always use:

* {
  box-sizing: border-box;
}

Upvotes: 6

Related Questions