html - 带有填充和边距的内部元素的粘性页脚 (Ryan Fait)

Question

我有一个问题，就是无法解决问题，可能是因为我累了。我正在使用 Ryan's Fait sticky footer我相信你们中的大多数人都很熟悉。我经常使用它，直到现在才遇到任何问题。我正在处理的设计有一个带有多个内部子元素的页脚。

.newsletter 的元素之一是使用填充或边距来形成较大的间隙，以便可以将背景图像放置在主体上。即使输入正确的高度，这也会导致溢出。删除填充可以解决问题。我知道使用 overflow: hidden 是一种选择，但我宁愿找出原因。

在新闻信件元素中设置了边距或填充的屏幕截图:

在新闻信件中没有设置边距或填充的屏幕:

CSS 不工作:

body {
  background: #212121;
  color: #ddd;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default;
  height: 100%;
}

.maincontainer {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -424px;
  width: 100%;
}

.mainfooter, .push {
  height: 424px;
  width: 100%;
}

.newsletter {
  padding: 1.875rem 0 1.875rem;
}

.newsletter-fix {
  background: #000;
  padding: 3rem 0 1rem;
  color: #ddd;
}

工作 CSS:

只需将以下值从上面提到的值更改为以下值即可解决问题，但我需要时事通讯之间的填充或边距间隙。

.maincontainer {
  margin: 0 auto -394px;
}

.mainfooter, .push {
  height: 394px;
}

.newsletter {
  padding: 0;
}

Answer 1

如果您将 background-color : black 放在 .mainfooter 而不是将 background-color 放在页脚中的不同元素会怎样？