Mengapa Susun Atur Grid Kedudukan Tetap Saya Melebihi Lebar Badan?

Reka Letak Grid Kedudukan Tetap Melebihi Lebar Badan

Apabila menggunakan Grid CSS dengan kedudukan tetap, anda mungkin menghadapi masalah apabila elemen grid memanjang di luar badan halaman, terutamanya apabila menetapkan sifat grid-template-lajur kepada 100%. Untuk memahami sebab ini berlaku, mari kita pecahkan masalah dan berikan penyelesaian.

Dalam kod CSS yang anda sediakan:

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}

Anda telah menetapkan lebar tetap 100% untuk bekas induk , yang bermaksud ia akan mengambil keseluruhan lebar kawasan yang boleh dilihat. Sifat grid-template-columns menetapkan lebar lajur grid masing-masing kepada 40% dan 60%.

Walau bagaimanapun, isu utama terletak pada kedudukan. Apabila anda menetapkan kedudukan: ditetapkan pada bekas induk, ia menjadi terpisah daripada aliran dokumen biasa dan diletakkan pada koordinat yang ditentukan (dalam kes ini, di penjuru kiri sebelah atas halaman). Penyemak imbas menyimpan ruang untuk elemen tetap, walaupun kandungannya melebihi kawasan yang boleh dilihat.

Tingkah laku ini tidak berkaitan dengan lebar: 100% sifat. Walaupun anda mengalih keluar baris itu, masalah itu masih wujud. Penyebabnya ialah sifat grid-template-columns.

Sifat grid-template-columns membahagikan ruang yang tersedia kepada dua lajur, tetapi anda juga telah menentukan jurang grid sebanyak 5px antara lajur, yang menambah kepada lebar keseluruhan grid. Dalam kes anda, 40% 60% 5px = 105px. 5px tambahan ini menolak tepi lajur kanan di luar kawasan boleh dilihat, menyebabkan ia kelihatan di luar kandungan.

Penyelesaian:

Untuk menyelesaikan isu ini, anda perlu mengira peratusan yang betul untuk lajur grid, dengan mengambil kira jurang grid. Daripada menggunakan peratusan mutlak, anda boleh menggunakan unit fr, yang mewakili sebahagian kecil daripada ruang yang tersedia.

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}

Dalam kod yang disemak ini, nilai 4fr dan 6fr mewakili 4 dan 6 bahagian ruang yang tersedia , masing-masing. Penyemak imbas akan mengira lebar sebenar lajur berdasarkan perkadaran ini, memastikan ia muat dalam bekas induk, termasuk jurang grid 5px.

Dengan menggunakan unit fr, anda boleh membuat reka letak grid responsif yang menyesuaikan diri dengan saiz skrin yang berbeza dan memastikan elemen grid kekal dalam kandungan halaman.

Atas ialah kandungan terperinci Mengapa Susun Atur Grid Kedudukan Tetap Saya Melebihi Lebar Badan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!