内容大于屏幕高度答案

【问题标题】：Content larger than screen height内容大于屏幕高度
【发布时间】：2014-09-19 17:10:14
【问题描述】：

我创建了一个 html 文件，其中包含页眉 div、内容 div 和页脚 div。 “bodyDiv”标签应该会出现滚动条（确实如此）。

现在我的问题是：为什么“bodxDiv”内的内容大于屏幕高度？所以滚动条出现了 - 如果不需要它。

在图片中可以看到，内容在红线之后结束，但还是有滚动条

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>

【问题讨论】：

这里是 OP 的代码jsfiddle.net/9YgLh/1
#mainDiv 的高度为 100%和上下边距。

标签： html css

【解决方案1】：

你的身体溢出了，因为你给了#mainDiv 属性height: 100%;，这使它占据了整个高度，然后，你给它一个顶部和底部边距：margin: 18px auto;。

CSS margin 属性在元素的盒子模型外部添加空间，以在元素和附近的其他元素之间创建间距。如果您想在没有额外高度的情况下保持间距外观，请考虑将属性更改为 margin: 0 auto;。

这将保持您所拥有的水平居中而不为身体增加额外的高度，从而解决您的问题。

【讨论】：

这不会改变任何事情
我怎样才能让它与水平浏览器边框保持距离？当我像你说的那样做时，距离就会消失。在这种情况下，为什么填充不能正常工作？
@Armin 很高兴你找到了答案（我出去吃午饭了）。不过要小心使用flexbox！在不了解工具的情况下使用工具可能很危险:-)