Saya baru dalam pengaturcaraan dan sedang cuba membuat tapak web satu halaman yang mudah menggunakan HTML/CSS dan JS. Saya mempunyai kelas CSS yang dipanggil 'general_container' di mana saya menulis teks, yang juga ditakrifkan dalam CSS sebagai 'div_text' (kod untuk kedua-duanya disediakan di bawah):
.general_container{ jidar: min(1vw,1vh) min(1vw,1vh); paparan: flex; ketinggian: muat-kandungan; lebar: muat-kandungan; lebar maksimum: 100%; ketinggian maksimum: 80vj; kedudukan: relatif; padding: min(1vw,1vh); warna sempadan: #232323; gaya sempadan: pepejal; lebar sempadan: 0.2rem; jejari sempadan: 1rem; align-item: tengah; justify-content:center; limpahan-x: tersembunyi; limpahan-y: auto; } .div_text { saiz fon: calc(12px + 1.5vw); warna: #F2F2F2; kedudukan: relatif; }
Masalah timbul apabila teks adalah besar berbanding dengan div di dalamnya: menggunakan saiz fon yang ditakrifkan di atas, pada resolusi asli saya (2560x1440) teks tersembunyi dan boleh diakses melalui bar skrol. Walau bagaimanapun, bahagian atas bar skrol tidak menunjukkan permulaan teks seperti yang ditunjukkan dalam imej di bawah (saya menggunakan teks pemegang tempat generik).
Saya rasa saiz fon dinamik dan kekangan pada saiz div adalah punca kelakuan ini, tetapi saya tidak tahu bagaimana untuk membetulkannya.
Imej dengan teks tidak boleh diakses melalui bar skrol
Saya cuba mengubah suai kekangan div dan sifat limpahan, tetapi daripada apa yang saya baca pada panduan webdev Mozilla rasmi, menggunakan limpahan-y: tatal (auto lalai untuk tatal dalam kes ini) melakukan apa yang saya mahu ia lakukan. Jika anda menambah lebih banyak teks, meningkatkan ketinggian maks akan menyebabkan masalah yang sama.
Alih keluar peraturanalign-item:center;.
Untuk memastikan bar skrol bermula di bahagian atas dan meliputi keseluruhan kandungan teks, buat perubahan berikut: Daripada
Contoh.general_container
中删除justify-content: center;
. Daripada.general_container
中删除height: fit-content;
和width: fit-content;
. Untuk mengehadkan ketinggiannya..general_container
设置一个特定的max-height