CSS グリッド項目の高さのパーセンテージが期待どおりに機能しないのはなぜですか?

CSS グリッド要素の高さ計算の問題

CSS では、グリッド要素の高さプロパティが予期しない動作をすることがあります。これは、予期しない親要素を基準にしてパーセンテージベースの高さが計算されることが原因である可能性があります。

ケーススタディ

次の寸法の CSS グリッド要素を考えてみましょう。

• グリッドコンテナ: 高さ: 100px;
• グリッド項目: 高さ: 200%;

予想どおり、グリッド項目はコンテナーの高さの 2 倍であり、超過した部分はスクロールバーで非表示になります。ただし、実際の結果は、グリッド項目がスクロールバーなしでオーバーフローしていることを示しています。

原因を理解する

詳しく調べると、高さのパーセンテージが以下に基づいて計算されていることが明らかになります。グリッド項目の親コンテナではなく、グリッド項目の子要素に対して。これは、グリッド項目がコンテナから 2 レベル下に存在し、中間レベルがトラックであるためです。

解像度

この問題を解決するには、両方のコンテナとコンテナ内の行は固定値に設定する必要があります。この場合、コンテナと行の両方が 100px に設定されています:

.gridContainer {
  height: 100px;
}

.gridContainer {
  grid-template-rows: 100px;
}

コンテナと行の両方の高さを定義することで、グリッド項目の高さのパーセンテージを、目的の親を基準にして正しく計算できます。 。これにより、グリッド項目の高さを行の高さの 200% にすることができ、スクロールバーでオーバーフローが隠れても確実にコンテナ内に収まるようになります。

以上がCSS グリッド項目の高さのパーセンテージが期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。