Question

我已经尝试了很多。

没有滚动条，我没有达到100％的高度：

＆＃13;

/* =================== Global =================== */
*{
  padding: 0px;
  margin:0px;
}
html, body{
  height: 100%;
  background-color: #7a7a78;
  font-size: 11px;
  font-family: Verdana, sans-serif;
}
a{
  color: #000;
  text-decoration:none;
}
header{
  max-width: 1000px;
  margin: auto;
  height: 75px;
  background-color: #d0ccc9;
}
nav{
  background-color: #964951;
  height: 30px;
}
#nav{
  max-width: 940px;
  height: 30px;
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
}
section{
  margin: auto;
  max-width: 970px;
  background-color: #d0ccc9;
  padding-left: 15px;
  padding-right: 15px;
  height: 30px;
}
main{
  margin-left:auto;
  margin-right:auto;
  max-width: 970px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  background-color: #d0ccc9;
  min-height: 150px;
 height: 100%;
}
footer{
  padding-left: 15px;
  padding-right: 15px;
  background-color: #964951;
  height: 75px;
  color: #fff;
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
}
footer a{
  color: #fff;
  text-decoration:none;
}

＆＃13;

enter image description here

有人可以告诉我我做错了吗？

谢谢

编辑：抱歉，我没有插入css代码。虽然一切都是正确的，但总是一样的错误

Answer 1

如果没有看到HTML代码，则很难判断，但您的main元素有height: 100%;。因此，如果之外的其他元素<{1}}元素（很可能来自您的CSS），它们将添加到高度，这将使整体高度超过100％，再次导致滚动条。

在评论中添加HTML代码图片链接后添加：

就像我上面写的那样：main以上有main，header和nav，在它下面，有页脚。根据您发布的CSS，所有这些加起来100％PLUS 210px（根据您的CSS，210px是所有其他高度的总和）：导致滚动条的溢出。

解决方案：将section应用于height: calc( 100% - 210px)的CSS规则（而不是那里100％的高度）

css主要内容高度没有滚动条

1 个答案: