68

箱padding-bottomで使うと仕事ができません。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;
}

フィドル。

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

4

13 に答える 13

66

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

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

FF、Chrome、IE8-10で動作します。

于 2014-02-26T11:47:32.710 に答える
18

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

@PhilipがAlexandreLavoieのソリューションに応えて提起したまさにそのような状況のためにここに来ました。コンテナ内で動的にコンテンツを生成したので、のような特定のdiv名にスタイルを適用することはできません#some_info。

幸い、CSS3をサポートするブラウザーには、単純な解決策があります。コンテナーに下のパディングを適用する代わりに、コンテナー内の最後の子要素に下マージンを適用します。

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

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

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

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

于 2016-07-04T05:47:26.430 に答える
7

上記の解決策は私のニーズにはうまくいきませんでした、そして私は単純な解決策に出くわしたと思います。

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

OPのフィドルの修正バージョンへのリンク：http：//jsfiddle.net/dennisoneil/rwgZu/508/

以下の簡単な例。

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

#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>

于 2018-08-14T15:37:19.697 に答える
4

完全に機能している可能性のあるアプローチは次のとおりです。

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

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}
于 2012-11-20T11:13:16.903 に答える
2

親divのスタイルを通常どおりに設定し、内部divに必要な処理を実行させます。

削除overflow-xしてoverflowオンにし#container、に変更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/

于 2016-08-30T00:21:11.790 に答える
2

簡単な解決策を探していて、DOMを変更できる場合はoverflow、を外側の要素にpadding、を内側の要素に配置します。

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll__inner {
    padding: 3em;
}

元の質問の例では、次のようになります。

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

#some_info {
    height: 900px;
    background: #000;
    padding: 3em;
    box-sizing: border-box; /* only needed if wanting padding to not be added to height */
}

ここでの使用に注意してくださいbox-sizing: border-box。これは、OPの高さがハードコードされているためにのみ必要です（通常は悪い方法ですが、エッジの場合に必要になる可能性があります）。したがって、これを追加border-boxすると、3emパディングで高さを増やすのではなく、の内側にパッドを入れることができます900px。

最後に、スタイリングのためにIDを使用しないことをお勧めします。これは主に、IDの特異性が非常に高いためです。詳細については、この投稿を参照してください。

于 2019-11-12T12:05:25.597 に答える
1

デモ

こんにちは今この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
}

デモ

于 2012-11-20T11:16:25.253 に答える
1

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

上記のすべての答えはchrome43で失敗し、最大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に設定します。

于 2015-07-04T21:14:26.223 に答える
1

isHristovの答えに基づく：

#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に動的に表示/非表示にされる複数の要素がない限り、DanRobinsonの答えも素晴らしいです。その場合、：last-childは非表示の要素をターゲットにし、効果がない可能性があります。

于 2016-08-28T11:37:55.227 に答える
0

私@-moz-document url-prefix()はあなたが必要なものだと思います。

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

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

@-moz-document url-prefix() {
  #container > :last-child {
    margin-bottom: 3em;
  }
}
<div id="container">
  <div id="some_info"></div>
</div>

于 2020-08-06T05:20:51.417 に答える
0

ルールbox-sizing: border-boxを適用したのと同じ要素に追加する必要があります。overflow

于 2021-04-06T11:13:06.830 に答える
0

上位の回答はFireFox89では機能しませんでした。私が考えることができる唯一の賢明な解決策は、div改行しないスペースのみを含み、高さを固定して設定することです。

HTML

<div className="spacer">&nbsp;</div>

CSS

.spacer {
    height: 30px;
}

これは、マージンやパディングを利用しないため機能します。

于 2021-06-30T23:31:31.077 に答える
0

私はちょうどこの問題に直面しました、それはFirefox 87、2021年にリリースされたバージョンでも持続します。

しかし、つい最近修正されました。Firefox 93にアップデートした後、スクロールによる下部のパディングは正常に機能します。

于 2021-10-19T20:55:59.013 に答える