0

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>
Udit Upadhayay
  • 3
  • 2

2 Answers2

0

Use vh instead of %;

 #encloser
 {
 top: 0;
 position: absolute;
 width: 98%;
 height: 98vh;
 margin: 1vh;
 background-color: black;
 }

CSS Units - What is the difference between vh/vw and %?

Community
  • 1
  • 1
ms_nitrogen
  • 240
  • 1
  • 14
0

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.

David Gilbertson
  • 4,219
  • 1
  • 26
  • 32