Question

在这个相当简单的HTML页面和CSS样式表中，body和html元素都设置为“height：100％;”但是页面比窗口略长，创建了一个我不想要的滚动条。

我已经阅读了很多关于页面底部这个额外空间问题的堆栈交换帖子，但是没有设法找到适合我的修复或解释。

我很确定问题不是由DOM中的杂散文本节点引起的。我已经尝试删除HTML文件中的标签之间的所有额外空白无效。我尝试用“最小高度：100％”来塑造身体，但随后页面的紫色内容不再像以前那样占据整个窗口的85％。我试过设置“溢出：隐藏;”在html元素上，这似乎有效，但我不知道为什么会这样。我甚至尝试使用flexbox来实现代码中显示的功能，但我也无法做到这一点。

当我右键单击底部的额外不需要的黄色空间并单击“Inspect Element”时，我会被定向到“buttonWrapper”div，但我不知道为什么会导致任何问题。

为什么发生这种情况的有效解释对我来说比现在解决方案更重要（因此我对“溢出：隐藏;”方法不满意）。如果你有一个解决方案，我宁愿它完全基于CSS。

感谢您花时间阅读本文。

* {
  margin: 0;
  padding: 0;
}
html {
  background-color: yellow;
  width: 100%;
  height: 100%;
}
body {
  background-color: grey;
  width: 100%;
  height: 100%;
}
#titleSection {
  width: 100%;
  height: 15%;
  text-align: center;
  font-size: 10vmin;
}
#contentSection {
  width: 100%;
  height: 85%;
  background-color: purple;
}
.buttonWrapper {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.buttonImage {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<!doctype html>
<html>

<head lang="en">
  <meta charset="utf-8">
  <title></title>
  <link type="text/css" rel="stylesheet" href="style.css">
  <link rel="icon" href="" type="image/x-icon" />
  <script src="code.js"></script>
</head>

<body>

  <div id="titleSection">Who's going to set up the board?</div>

  <div id="contentSection">

    <div class="buttonWrapper">
      <img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
    </div><!--
  
	--><div class="buttonWrapper">
      <img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
    </div>

  </div>

</body>

</html>

Answer 1

将其更改为：

#contentSection {
  width: 100%;
  height: 85%;
  background-color: purple;
  font-size: 0;
}

为什么这个HTML页面在窗口中略微溢出？

1 个答案: