首頁 > web前端 > css教學 > 為什麼我的網格專案的百分比高度無法正常工作?

為什麼我的網格專案的百分比高度無法正常工作?

Patricia Arquette
發布: 2024-12-03 07:08:09
原創
207 人瀏覽過

Why Isn't My Grid Item's Percentage Height Working Correctly?

為什麼我的網格元素的高度計算不正確?

不正確的高度計算可能源自於 CSS 網格中高度百分比的解釋方式版面。

在您的程式碼中,網格容器的固定高度為 100px,而網格專案的高度為 200%。通常,您會預期網格項目佔據容器高度的兩倍 (200px)。但是,這在您的情況下沒有發生。

原因是在 CSS 網格佈局中,網格元素存在於軌道內,而軌道又存在於容器內。網格項佔據軌道內的行或列,而不是直接在容器內。

因此,網格項的高度百分比是相對於它佔據的軌道的高度,而不是容器的高度。在您的程式碼中,該行具有預設的自動高度,它允許網格項目根據需要拉伸。

要解決此問題,您必須為網格項目所佔用的行設定特定的高度。這將確保網格項的百分比高度相對於該高度正確計算。在修改後的程式碼中,行高已設定為 100px 以符合容器的高度,從而產生所需的行為:

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}
登入後複製

以上是為什麼我的網格專案的百分比高度無法正常工作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板