Mengapa Susun Atur Grid Kedudukan Tetap Saya Melebihi Lebar Badan?

Susan Sarandon
Lepaskan: 2024-10-30 19:02:30
asal
550 orang telah melayarinya

Why Does My Fixed Positioned Grid Layout Exceed The Body Width?

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%;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!