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

我有一个问题，就是无法缠住我的头，可能是因为我累了。我正在使用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;
}

最佳答案

如果将background-color : black放入.mainfooter而不是将背景色放入页脚中的其他元素怎么办？

关于html - 带有内部元素(带填充和边距)的粘性页脚(Ryan Fait)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36647529/