Question

我创建了一个html文件，带有标题div，内容div和页脚div。滚动条应显示“bodyDiv”标签（确实如此）。

现在我的问题：为什么“bodxDiv”中的内容大于屏幕高度？因此滚动条出现 - 如果不需要它也会出现。

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

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>

Answer 1

你的身体正在溢出，因为你给了#mainDiv属性height: 100%;，这使得它占据了整个高度，然后，你给它一个上下边距：margin: 18px auto;。< / p>

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

这样可以保持水平居中，不用为身体增加额外的高度，从而解决您的问题。

内容大于屏幕高度

1 个答案: