Question

所以我有一个带有专栏的网页。该列顶部有一个固定的标题，还有一个大的滚动主体部分，下面的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。

Answer 1

在div.body中添加一个带有margin-bottom的内部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;
}

Answer 2

另一种解决方法是将您的内容包装在另一个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 */
}

Answer 3

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

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

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

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

3 个答案: