Question

希望你能提供帮助。自从我编写了没有框架之类的东西已经很长时间了，所以我故意使用vanilla html和css作为复习。

我已经开始构建一个快速的网站原型，我不能为我的生活找出为什么在navbar元素和我的背景部分下面有空格，尽管专门为完整的视口背景创建了css规则。我希望背景部分直接在导航栏后启动。

注意：在测试中，样式问题似乎与html和body元素规则有关。我可以将颜色设置为与我的背景部分相匹配，但不知怎的，我觉得以后可能会引起其他问题..或者至少感觉就像是作弊。有其他可能的解决方案吗？最重要的是，根据我设定的css规则，为什么会发生这种情况？除非我忽略了一些重要的事情，否则一切似乎都是有序的，检查元素没有帮助。

我可以让其他一切正常运行，但我更喜欢构建块，所以下面的示例看起来会很混乱。

为我编码中的任何邋iness道歉。我主要是一名平面设计师。

html, body {
  margin:0px;
  padding:0px;
  border:0px;
  background-color:white;
}

完整的Codepen：http://codepen.io/J_Davis/pen/RGLVPv

谢谢！

Answer 1

添加到你的包装器这个道具：

display: flex;
flex-direction: column;

它应该是这样的：

#wrapper {
  display: flex;
  flex-direction: column;
  margin:0px;
  padding:0px;
  border:0px;
}

Here你有它的工作

新年快乐!!!

Answer 2

您还可以将bigBG类的margin-top设置为-20px; 像这样：

.bigBG {
  background:#FF5733;
  min-height:100vh;
  margin-top:-20px;
  padding:0px;
}

快乐的编码！

如何消除导航栏和主背景div之间的空白？

2 个答案: