CODEWITHSUNDEEP
htmlcss
medihack
medihack

Reputation: 16627

Scrollbars show up when adding element with same size as body

When I add an element with the same size (width + height) as the body tag, then I always get (unnecessary?!) horizontal and vertical scrollbars (tested in Chrome and FF).

/* css */
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}

/* javascript */
$("<canvas>")
.appendTo("body")
.attr("width", $("body").width())
.attr("height", $("body").height());

Full example at JSFIDDLE.

Why do those scrollbars show up? The body should be large enough to fit the element without scrollbars. When removing 4 pixels from the width and height the scrollbars are gone. Why exactly 4 pixels?

Upvotes: 1

Views: 95

Answers (2)

Alfred
Alfred

Reputation: 91

Same thing happened to me and i get both horizontal and vertical scrolls,i am new and i don't know why that happens but it fixed when i set overflow-x: 0; in the body element. i mean both horizontal and vertical scrolls disappeared. and page get vertical scroll when it has overflow in y axis.

Upvotes: 0

Ed Winn
Ed Winn

Reputation: 31

Would it have something to do with the canvas element having a default padding of 2px? If you set your css to removing the default margin and padding from the canvas element what happens?

Upvotes: 1

Related Questions