填充底部在Firefox和IE11中不起作用

Question

JsFiddle

的CSS

body, html {
  background: violet
}
* {
  margin: 0;
  padding: 0
}
.fixed {
  height: 100%;
  width: 300px;
  background: #fff;
  right: 0;
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-left: 1px solid red;
}
.container {
      -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red
}

我已经在Chrome和Firefox浏览器中尝试了以上代码。我还附上了两个屏幕截图。我想知道为什么padding-bottom：60px在Firefox中无法使用。但是，它在Chrome浏览器中可以正常工作。在IE11中也无法使用

在Chrome浏览器中（工作正常）：

在Firefox浏览器中（填充底部不起作用。为什么？）：

真的我不明白

Answer 1

有很多专家告诉您的原因，例如溢出属性导致此问题或显示：如果您搜索原因，flex处理填充的方式会有所不同。@Temani Afif是正确的，并且也纠正了我，这是一个最近出现的bug，其中包含overflow-y:scroll或overflow-y:auto不考虑padding-bottom。

https://bugzilla.mozilla.org/show_bug.cgi?id=1417667

对于快速解决方案，您可以执行的操作是在设置了after-y属性的flex项目上应用底部填充，而不是在其上设置底部填充。

.container {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 30px 60px 0 60px;
}

.container:after {
  content:'';
  display:block;
  padding-bottom:30px;
}

希望这可以帮助您和其他所有人。

Answer 2

出现这种情况是因为overflow-y: auto;规则。试试这个CSS

.container {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;  /* This rule affect the padding-bottom, quit it and see the results */
    box-sizing: border-box;
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red;
  margin-top: 60px; /* This rule add the effect you want */
}

编辑

理论上，填充底部是存在的，但是当您应用overflow-y:auto;滚动条时，它会占用所有可用空间。

如果你不想添加一个，margin-top: 60px;你可以尝试这个新的CSS：

.container {
      -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
}
.container p {
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red;
}

更新

或者尝试这个解决方案：

.container {
    overflow-y: auto;
    padding: 30px 60px;
}
.container p {
    padding: 0 0 60px 0;
}