4

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

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

测试.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>

测试.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。

4

3 回答 3

8

在 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;
}
于 2012-11-02T09:44:42.883 回答
2

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

  <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 */
}
于 2012-11-02T05:43:47.617 回答
0

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

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

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

于 2014-02-26T11:44:08.520 回答