0

I've created a html file, with a header div, a content div and a footer div. The scrollbar should show up for the "bodyDiv" tag (and it does).

Now to my question: Why is the content inside the "bodxDiv" larger than the screen height? So the scrollbar appears - also if there is no need for it.

At the picture you can see, that the content ends after the red line, but there is stil a scrollbar

enter image description here

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="bodyDiv">
      <div id="mainDiv">
        <div id="headDiv">Header</div>
        <div id="contentDiv">Content</div>
        <div id="footerDiv">Footer</div>
      </div>
    </div>
  </body>
</html>

style.css

<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

html *
{
   color: #000;
   font-family: "Arial", Arial, sans-serif;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#bodyDiv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: auto;
  width: 100%;
  height: 100%;
  text-align: center;
}

#mainDiv {
  width: 600px;
  height: 100%;
  text-align: left;
  margin: 18px auto;
}

#headDiv {
  border: 1px solid #000;
}

#contentDiv {
  border: 1px solid #000;
  margin-top: 6px;
}

#footerDiv {
  border: 1px solid #000;
  margin-top: 6px;
}
</style>
Huangism
  • 16,278
  • 7
  • 48
  • 74
Armin
  • 351
  • 1
  • 4
  • 29

1 Answers1

3

Your body is overflowing because you give #mainDiv the property height: 100%;, which makes it take the full height, and then, you give it a top and bottom margin: margin: 18px auto;.

The CSS margin property adds space onto the outside of an element's box model to create spacing between an element and other elements nearby. If you want to maintain that appearance of spacing without the extra height, consider changing the property to margin: 0 auto;.

This will keep the horizontal centering that you have without adding extra height to the body, thus solving your problem.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • that doesn't change anything – Armin Jul 28 '14 at 14:00
  • And how can I distance it from the horizontal browser borders? The distance gets lost when I do it like you said. And why does padding not work like it should in that case? – Armin Jul 28 '14 at 16:21
  • @Armin Glad you found the answer (I was out to lunch). Be careful using `flexbox`, though! It can be dangerous to use tools without understanding them :-) – TylerH Jul 28 '14 at 17:21