15

Chromeでこのフィドルを見ると、http：//jsfiddle.net/up4Fa/

20pxのパディングが内部にあるオーバーフロー要素が表示されます！すべて正常で、期待どおりに機能しています。

ただし、IE9またはFirefoxで同じテストを実行すると、下部のテキストがコンテナーの端に接触し、下部のパディングが無視されます...

内側のdivでパディングを行うと問題が発生しますが、1つのdivで修正したいので、FirefoxとIEの両方に問題があるのにChromeには問題がない理由を理解できませんか？

編集：誰かが疑問に思っていた場合に備えて、テキストは理由ではありません！テキストを削除すると、赤いボックスでも同じようになります。

ありがとう

4

4 に答える 4

20

コンテナのdivのサイズをポジショニングによって間接的に設定しているため、これらのブラウザはdivの高さを予測できず、パディングを適切にレンダリングできないようです。これを修正するための手っ取り早いトリックは、コンテナの下部のパディングを削除することです。

div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

そして、最後の子に下マージンを追加します。

div.container > *:last-child {
    margin-bottom: 20px;
}

http://jsfiddle.net/xa9qF/

于 2012-05-23T15:20:43.373 に答える
4

私の意見では、最良のアプローチは:afterセレクターを使用することです

div.container:after{
    content:"";
    display:block;
    height:20px; /* Which is the padding of div.container */
}

http://jsfiddle.net/up4Fa/23/

于 2017-04-23T14:30:40.010 に答える
1

これは、CSSグリッドを使用していたときの修正です。

/* Fix scrollbar removing padding-bottom */
@supports (-moz-appearance:none) {
  .container::after {
    content: "";
    height: 1px;
    margin: calc(var(--padding) - var(--gap));
  }
}
于 2018-12-17T18:44:36.650 に答える
0

ビューポートユニットは常に物議を醸しています。その一部は、モバイルブラウザがそれらの実装方法について独自の意見を持つことで物事をより複雑にしたためです。

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

モバイルでユニットをビューポートするコツ

于 2020-12-16T23:16:21.397 に答える