Mengapa Bekas Saya Menunjukkan Bar Skrol Menegak Walaupun Tingginya Padan dengan Kandungannya?

Memahami Isu Bar Tatal Menegak

Apabila div .displayContainer anda mempunyai ketinggian yang sama dengan elemen anaknya, anda mungkin menghadapi bar skrol menegak yang tidak perlu. Ini berlaku disebabkan tetapan lalai CSS halus yang memainkan peranan penting dalam tipografi: vertical-align: baseline.

Vertical-Align and Baseline

Inline- elemen tahap, termasuk div blok sebaris, mempunyai nilai garis dasar penjajaran menegak lalai. Tetapan ini menyimpan ruang di bawah elemen untuk menampung potensi turunan. Turun ialah huruf kecil yang memanjang di bawah garis dasar, seperti "j," "g," atau "p."

Kerana ini terpelihara ruang menurun, elemen blok sebaris mungkin kelihatan dinaikkan sedikit dari tepi bawah bekasnya, mewujudkan ketinggian tambahan di dalam bekas. Ketinggian tambahan ini mencetuskan limpahan dan menyebabkan bar skrol menegak muncul.

Mengalih keluar Bar Tatal Menegak

Untuk mengalih keluar bar skrol menegak, anda boleh mengubah suai tetapan penjajaran menegak bagi elemen anak atau bekas induk. Berikut ialah beberapa pilihan:

1. Laraskan Jajaran Menegak

Tukar nilai jajaran menegak unsur anak ke bawah (atau mana-mana nilai sah lain):

.sideBar, .contentHolder {
  vertical-align: bottom;
}

2. Gunakan Paparan: Sekat

Tukar elemen kanak-kanak daripada paparan: blok sebaris kepada paparan: blok:

.sideBar, .contentHolder {
  display: block;
}

3. Tetapkan Ketinggian Garisan: 0

Tetapkan ketinggian garisan kepada 0 pada bekas induk:

.displayContainer {
  line-height: 0;
}

4. Tetapkan Saiz Fon: 0

Tetapkan saiz fon kepada 0 pada bekas induk. Anda boleh mengatasi saiz fon pada elemen kanak-kanak jika perlu:

.displayContainer {
  font-size: 0;
}

.sideBar, .contentHolder {
  font-size: 16px;
}

Dengan melaksanakan mana-mana penyelesaian ini, anda boleh menghapuskan bar skrol menegak sambil mengekalkan reka letak yang diingini.

Atas ialah kandungan terperinci Mengapa Bekas Saya Menunjukkan Bar Skrol Menegak Walaupun Tingginya Padan dengan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!