Sidebar melekit berukuran dinamik dengan HTML dan CSS

Mewujudkan bar sisi melekit yang menyesuaikan diri dengan saiz viewport adalah mengejutkan dengan mudah menggunakan HTML dan CSS. Memanfaatkan position: sticky dan menetapkan offset arah (seperti top: 0 ) membolehkan pelaksanaan ciri-ciri mudah seperti menu lompat-ke-anchor atau tajuk seksyen. Untuk teknik kedudukan melekit yang lebih maju, meneroka sumber seperti trik CSS.

Walau bagaimanapun, cabaran timbul apabila berurusan dengan kandungan bersaiz dinamik dalam elemen melekit. Ini boleh membawa kepada kandungan yang tersembunyi di bawah viewport, isu biasa apabila ketinggian sidebar melebihi ruang skrin yang tersedia.

Saya baru -baru ini menghadapi masalah ini semasa merancang susun atur desktop dengan kawasan kandungan utama dan bar sisi yang mengandungi item tindakan dan penapis. Sidebar diperlukan untuk tetap tetap ke viewport semasa menatal. Walaupun gaya awal adalah mudah, ketinggian pembolehubah kandungan sidebar memberikan cabaran. Menggunakan max-height dan overflow-y: auto bekerja dengan baik pada skrin yang lebih besar, tetapi viewports yang lebih kecil menyebabkan sidebar melimpah.

Menyelesaikan masalah ketinggian dinamik

Pendekatan awal saya dianggap menggunakan pertanyaan media untuk menghilangkan kedudukan melekit pada skrin yang lebih kecil, menjadikan sidebar relatif kepada bekasnya. Walau bagaimanapun, ketinggian dinamik bar sisi membuat mencari titik putus yang sesuai untuk pertanyaan media yang mustahil. Penyelesaian JavaScript untuk menyesuaikan ketinggian secara dinamik berdasarkan saiz viewport seolah -olah terlalu kompleks dan terdedah kepada isu -isu dengan saiz semula tetingkap.

Penyelesaian berasaskan CSS yang lebih elegan terbukti berkesan.

Melaksanakan penyelesaian

Elemen utama yang digunakan flexbox untuk susun atur, memberikan flex-basis tetap ke bar sisi untuk lebar desktop dan membolehkan elemen artikel mengisi ruang yang tinggal. Teknik Albatross Suci Flexbox memastikan penyusun yang betul pada pandangan yang lebih kecil tanpa pertanyaan media. align-self: start di bar sisi menghalang ketinggiannya daripada meregangkan dengan artikel utama.

CSS utama untuk bar sisi melekit:

 .sidebar {
  --offset: var (-ruang);
  / * ... */
  Kedudukan: melekit;
  atas: var (-offset);
}

Ini menetapkan tingkah laku melekit dengan mengimbangi teratas yang dikawal oleh harta tersuai CSS ( --offset ). Pembolehubah ini digunakan semula untuk jarak yang konsisten.

Struktur komponen bar sisi:

 .component {
  paparan: grid;
  grid-template-baris: auto 1FR auto;
}

.component .content {
  Max-Height: 500px;
  limpahan-y: auto;
}

Ini menggunakan grid CSS untuk susun atur yang fleksibel. max-height pada bahagian kandungan menghalang pertumbuhan yang berlebihan, dan overflow-y: auto membolehkan menatal apabila perlu. Secara kritis, dalam konteks bar sisi:

 .SIDEBAR .COMPONENT {
  Max-Height: Calc (100vh-var (-offset) * 2);
}

Ini secara dinamik mengira max-height berdasarkan ketinggian viewport dan mengimbangi, mencegah limpahan.

Pendekatan ini mewujudkan bar sisi melekit yang responsif yang menyesuaikan diri dengan saiz viewport yang berbeza. Walaupun sesuai untuk desktop, peningkatan selanjutnya mungkin diperlukan untuk peranti yang lebih kecil, seperti butang "melompat ke bar sisi" atau togol untuk menyembunyikan/menunjukkan bar sisi. Ujian pengguna akan membimbing lelaran selanjutnya.

Atas ialah kandungan terperinci Sidebar melekit berukuran dinamik dengan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!