粘性页脚，内部元素有填充和边距（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

如果您将.mainfooter添加到when('/showmessage/:groupkey/:groupmessage', { templateUrl: 'templates/groups/showmessage.html', controller: 'GroupsController' }). when('/showmessage/:groupkey/:channelmessage', { templateUrl: 'templates/channels/showmessage.html', controller: 'ChannelsController' }). 而不是将背景颜色添加到页脚内的不同元素，该怎么办？

Answer 2

似乎我非常努力和愚蠢！我感谢大家花时间看一看，但它看起来像用户错误一样简单。

问题是因为我从第一位颜色计算，在这种情况下是background: #000 .newsletterfix，并没有考虑它上面的隐形填充。愚蠢，我。

示例：