コンテナーの高さがコンテンツと一致している場合でも、コンテナーに垂直スクロールバーが表示されるのはなぜですか?

垂直スクロール バーの問題について

.displayContainer div がその子要素と同じ高さである場合、不要な垂直スクロールバー。これは、タイポグラフィーで重要な役割を果たす微妙な CSS のデフォルト設定、vertical-align:baseline.

Vertical-Align および Baseline

Inline- が原因で発生します。インラインブロック div を含むレベル要素には、デフォルトの垂直方向の位置合わせ値であるベースラインがあります。この設定により、潜在的なディセンダーを収容するために要素の下にスペースが確保されます。ディセンダは、「j」、「g」、「p」など、ベースラインより下に伸びる小文字です。

この予約されたディセンダーのためスペースを使用すると、インライン ブロック要素がコンテナの下端からわずかに盛り上がって表示され、コンテナ内に高さが追加されることがあります。この余分な高さによりオーバーフローが発生し、垂直スクロール バーが表示されます。

垂直スクロール バーの削除

垂直スクロール バーを削除するには、次の手順を実行します。子要素または親コンテナの垂直方向の配置設定。以下にいくつかのオプションがあります:

1.垂直方向の位置合わせを調整

子要素の垂直方向の位置合わせ値を下 (または他の有効な値) に変更します:

.sideBar, .contentHolder {
  vertical-align: bottom;
}

2。 Display: Block

を使用して、子要素を display: inline-block から display: block:

.sideBar, .contentHolder {
  display: block;
}

に変換します。行の高さを設定: 0

親コンテナの行の高さを 0 に設定します:

.displayContainer {
  line-height: 0;
}

4。 Set Font-Size: 0

親コンテナのフォント サイズを 0 に設定します。必要に応じて、子要素のフォント サイズをオーバーライドできます。

.displayContainer {
  font-size: 0;
}

.sideBar, .contentHolder {
  font-size: 16px;
}

これらのソリューションのいずれかを実装すると、目的のレイアウトを維持しながら垂直スクロール バーを削除できます。

以上がコンテナーの高さがコンテンツと一致している場合でも、コンテナーに垂直スクロールバーが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。