在具有固定宽度标题的滚动列底部填充答案

【问题标题】：Padding at the bottom of a scrolling column with a fixed-width header在具有固定宽度标题的滚动列底部填充
【发布时间】：2012-10-22 19:07:06
【问题描述】：

所以我有一个带有专栏的网页。该列顶部有一个固定的标题和一个大的滚动正文部分，下面的 HTML/CSS 可以很好地解决这个问题。

问题：我想在正文的底部添加填充，所以如果你一直向下滚动，你会得到一些空白，而不是让所有东西都卡在底部边缘。将padding-bottom: 50px 添加到.body 在Chrome 中完美运行；但是，在 Firefox 中，使用 bottom 属性似乎意味着 padding-bottom 被忽略。如果您放下bottom，则会出现填充，但滚动条会消失。

test.html

<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
  <div class="header">
    Fixed header
  </div>
  <div class="body">
    <h1>Body</h1>
    Where's the bottom padding?
  </div>
</div>

test.css

.column {
  position: absolute;
  height: 100px;
  width: 100%;
  background-color: green;
}

.header {
  position: absolute;
  height: 30px;
  background-color: red;
}

.body {
  position: absolute;
  top: 30px;
  bottom: 0;
  overflow-y: auto;
  background-color: blue;
  padding-bottom: 50px;  /* Broken in Firefox */
}

上面的JSFiddle：http://jsfiddle.net/jpatokal/PBwVa/

有没有办法解决这个问题？我想出的一个解决方法是使用一串:last-child 选择器将填充添加到.body 中的最后一个元素，但是，eww。

【问题讨论】：

标签： css firefox google-chrome layout padding

【解决方案1】：

当您不想添加额外的 DIV 时，还有一种解决方法。

.body:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

在 FF、Chrome、IE8-10 中工作。

【讨论】：

【解决方案2】：

在 div.body 中添加一个带有底部边距的内部 div 似乎可以在您的 jsfiddle 中使用。

<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
  <div class="header">
    Fixed header
  </div>
  <div class="body">
    <div class="inner">
      <h1>Body</h1>
        Where's the bottom padding?
    </div> 
  </div>
</div>

和（额外的）css：

.body .inner {
  margin-bottom: 30px;
}

【讨论】：

【解决方案3】：

另一种解决方法是将您的内容包装在另一个 div 中，并将您的填充（或边距）添加到该 div，而不是滚动 .body div：

  <div class="body">
    <div class="body-content">
      <h1>Body</h1>
      Where's the bottom padding?
    </div>
  </div>

还有 css...

.body {
  position: absolute;
  top: 30px;
  bottom: 0;
  overflow-y: auto;
  background-color: blue;
}
.body-content {
  padding-bottom: 50px;  /* should work */
}

【讨论】：