web-dev-qa-db-ja.com

css-スクロールでボックスにパディングを適用すると、ボトムパディングが機能しません

Overflow-y：ボックスでautoを使用すると、ボトムパディングが機能しません。

HTML：

<div id="container">
    <div id="some_info"></div>
</div>

CSS：

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
}

フィドル： http://jsfiddle.net/rwgZu/

編集：Firefoxを使用しています

htmlcssfirefoxoverflowpadding
34
Philip

追加のDIVを使用しないもう1つのソリューション。

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

FF、Chrome、IE8-10で作業しています。

36
isHristov

私はパーティーに遅れましたが、上記の懸念のいくつかに対処する別のソリューションを追加する価値があると思いました。

Alexandre Lavoieのソリューションに応じて@Philipが発生したまさにそのような状況のためにここに来ました。コンテナ内にコンテンツを動的に生成しているので、#some_info。

幸いなことに、CSS3をサポートするブラウザー用の簡単なソリューションがあります。コンテナーに下部パディングを適用する代わりに、コンテナー内の最後の子要素に下部マージンを適用します。

#container > :last-child {
    margin-bottom: 3em;
}

コンテナdiv内の最後の子要素がブロックレベルの要素である限り、これでうまくいくはずです。

デモ： http://jsfiddle.net/rwgZu/240/

追伸Firefoxがパディングの一番下までスクロールできないことが実際にバグである場合（@Kyleが示唆するように）、Firefox 47.0の時点ではまだ修正されていません。イライラする！ Internet Explorer 11.0.9600.17843は同じ動作を示します。 （対照的に、Google Chromeは期待どおりに下部のパディングを表示します。）

9
Dan Robinson

完全に機能している可能なアプローチを次に示します。

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}
4
Alexandre Lavoie

デモ

こんにちは、このCSSに慣れました

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

デモ

2
Rohit Azad

上記のソリューションは私のニーズに合っていなかったため、簡単なソリューションを見つけたと思います。

コンテナとオーバーフローするコンテンツが同じ背景色を共有している場合、背景色に一致する色で上下の境界線を追加できます。すべての周りに等しいパディングを作成するには、コンテナの左右のパディングに等しい境界幅を設定します。

OPのフィドルの修正版へのリンク： http://jsfiddle.net/dennisoneil/rwgZu/508/

以下の簡単な例。

注：スタックオーバーフローはスニペットの結果をオーバーフロースクロールにします。何が起こっているのかを見てください。フィドルは、あなたの最良のプレビューオプションかもしれません。

#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}
<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>
2
Dennis O'Neil

isHristov's answer に基づく：

#container {
    padding: 3em 3em 0 3em; /* padding-bottom: 0 */
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#container:after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    margin-bottom: 3em; /* length you wanted on padding-bottom */
}

ただし、彼のソリューションは、この状況を適切に処理するブラウザーに余分なスペースを追加します。

ダンロビンソンの答え は、＃containerに動的に表示/非表示される複数の要素がない限り、素晴らしいです。その場合、：last-childは非表示の要素をターゲットにし、効果を持たない可能性があります。

1
LGT

通常、親divのスタイルを設定し、内側のdivに希望どおりの動作をさせます。

overflow-xの#containerとoverflowを削除し、heightを100%に変更し、overflow-y:scroll;に#some_infoを追加します

#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

ワーキングデモ： http://jsfiddle.net/9yuohxuh/

1
Barrett Kuethen

ボトムパディングだけではありません。右のパディング/境界線/間隔も無視されます（コンテンツがなく、幅がスクロールしないため、例では表示できません）

上記のすべての回答はchrome 43で失敗し、最大3つのスクロールバーが生成されます！またはコンテンツが#some_infoをオーバーフローした場合。

例： http://jsfiddle.net/LwujL3ad/

それがあなたのために働いたなら、おそらくコンテンツがスクロール要素ほど広くないか、固定サイズであったためです。

正しい解決策は次のとおりです：

＃some infoをdisplay：tableに設定し、スクロールコンテナではなく、それにパディングまたは境界線を追加します。

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

デモ： http://jsfiddle.net/juh7802x/

失敗せず、セパレータとして追加する境界線とパディングを尊重する唯一の要素はTABLEです。

私が試しましたが、それが次の直接の子であるか、多くのアイテムが深くネストされているかに関係なく、コンテンツ以外のスタイリングはコンテンツをラップするために拡張されず、親の100％の幅のままになります。これはナンセンスです。なぜなら、コンテンツが親よりも大きいということは、スクロールするdivがまさに必要なシナリオだからです！

動的ソリューション（コンテナとコンテンツの両方）の場合、スクロールコンテナ内の要素のコンテナをdisplay：tableに設定します。

0
sergio