Udit Upadhayay Udit Upadhayay - 3 months ago 5
CSS Question

Getting 3% of extra height but could not figure out from where exactly

The #encloser division has a top and bottom margin of 1% each and and a height of 98% still I am getting a scrollbar in the browser.
If I change Height to 95% than Scrollbar go away.

This means I am getting 3% of extra height somehow. What am I missing here ?

Already Tried


  • Eric Meyer CSS reset

  • Removing margin from #header, #left, #right but it's not relevant as the height and width of all the divisions enclosed is done relative to #encloser





#encloser
{
top: 0;
position: absolute;
width: 98%;
height: 98%;/*only if I give height = 95% I can get rid of the scroll bar*/
margin: 1% 1% 1% 1%;
background-color: black;
}

#header
{
font-size : 1 em;
height: 20%;
width: 100%;
background-color: yellow;
margin-bottom: 1%;
}

#footer
{
width:100%;
height: 10%;
clear: both;
background-color: blue;
}

#left
{
float: left;
height: 67%;
width: 20%;
background-color: green;
margin-bottom: 1%;
margin-left: 1%;
}

#right
{
float: right;
height: 67%;
width: 78%;
background-color: red;
margin-bottom: 1%;
margin-right: 1%;
}


/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

<!doctype html>

<html>

<head>
<link href= "stylesheet.css" type = "text/css" rel = "stylesheet" />
<title> Resume </title>
</head>


<body>
<div id = "encloser" >
<div id = "header"></div>
<div id = "left"></div>
<div id = "right"></div>
<div id = "footer"></div>
</div>
</body>

</html>




Answer

This is because when you say margin: 1%, it gives you 1% of the width, it doesn't matter if you're using that 1% for the top or left or the whatever. You'll notice that if you resize your browser window so that the page is taller than it is wide, the scrollbar goes away.

From MDN when talking about setting margin with %

A relative to the width of the containing block. Negative values are allowed.

Comments