4

だから私は列のあるウェブページを持っています。列の上部には固定ヘッダーがあり、本体セクションは大きくスクロールされます。以下の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/

これを回避する方法はありますか？私が思いついた回避策の1つは、:last-childセレクターの文字列を使用して、.body代わりにその中の最後の要素にパディングを追加することでしたが、ええと。

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

.body別の回避策は、コンテンツを別の div でラップし、スクロールdivの代わりにその 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 */
}
于 2012-11-02T05:43:47.617 に答える