CODEWITHSUNDEEP
htmlcss
Armin
Armin

Reputation: 361

Content larger than screen height

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>

Upvotes: 0

Views: 2624

Answers (1)

TylerH
TylerH

Reputation: 21066

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.

Upvotes: 3

Related Questions