填充底部不能在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瀏覽器中（Padding Bottom無效。為什么？）：

真的我不明白這個..

Answer 1

許多專家告訴很多原因，比如溢出屬性導致這個或顯示：如果你搜索一個原因，flex處理填充有點不同。 @Temani Afif是正確的並且也糾正了我，這是最近出現的overflow-y:scroll或overflow-y:auto不考慮padding-bottom的錯誤。

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

為了快速解決您可以做的事情，而不是在具有overflow-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 */
}

編輯

從理論上講，padding-bottom就在那里，但當你應用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;
}

UPDATE

或嘗試此解決方案：

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