ຄໍາຖາມທົ່ວໄປທີ່ຖືກຖາມໃນການອອກແບບເວັບໄຊທ໌ແມ່ນ "ເຮັດແນວໃດທ່ານຕັ້ງຄ່າຄວາມສູງຂອງອົງປະກອບເປັນ 100%"?
ນີ້ອາດເບິ່ງຄືວ່າເປັນຄໍາຕອບທີ່ງ່າຍດາຍ. ທ່ານພຽງແຕ່ໃຊ້ CSS ເພື່ອກໍານົດລະດັບຄວາມສູງຂອງອົງປະກອບເປັນ 100%, ແຕ່ນີ້ບໍ່ໄດ້ສະເຫມີວ່າອົງປະກອບທີ່ເຫມາະສົມກັບປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບທັງຫມົດ. ໃຫ້ຊອກຫາວ່າເປັນຫຍັງສິ່ງນີ້ເກີດຂື້ນແລະສິ່ງທີ່ທ່ານສາມາດເຮັດໄດ້ເພື່ອບັນລຸຮູບແບບນີ້.
Pixels and Percentages
ເມື່ອທ່ານກໍານົດລະດັບຄວາມສູງຂອງອົງປະກອບໂດຍໃຊ້ ຄຸນສົມບັດ CSS ແລະມູນຄ່າທີ່ໃຊ້ pixels, ອົງປະກອບນັ້ນຈະໃຊ້ພື້ນທີ່ຕັ້ງຢູ່ໃນຕົວທ່ອງເວັບຫຼາຍ.
ຕົວຢ່າງ, ວັກທີ່ມີຄວາມສູງ: 100px; ຈະໃຊ້ເວລາເຖິງ 100 ຈຸດຂອງຊ່ອງຕັ້ງຢູ່ໃນການອອກແບບຂອງທ່ານ. ມັນບໍ່ສໍາຄັນວ່າຫນ້າເວັບຂອງຕົວທ່ອງເວັບຂອງທ່ານຂະຫນາດໃຫຍ່ແມ່ນຫຍັງ, ອົງປະກອບນີ້ຈະສູງ 100 pixels.
ອັດຕາສ່ວນເຮັດວຽກແຕກຕ່າງຈາກ pixels. ອີງຕາມຂໍ້ກໍານົດ W3C, ຄວາມສູງສ່ວນຮ້ອຍແມ່ນຖືກຄິດໄລ່ກ່ຽວກັບຄວາມສູງຂອງຖັງ. ດັ່ງນັ້ນ, ຖ້າທ່ານໃສ່ວັກທີ່ມີຄວາມສູງ: 50%; ພາຍໃນ div ທີ່ມີຄວາມສູງ 100 px, ວັກຈະ 50 pixels ໃນລະດັບຄວາມສູງ, ຊຶ່ງເປັນ 50% ຂອງມັນເປັນແມ່ບົດ.
ເປັນຫຍັງຈຶ່ງສູນການສູນເສຍຄວາມສູນເສຍ
ຖ້າທ່ານກໍາລັງອອກແບບເວັບໄຊທ໌ຫນຶ່ງ, ແລະທ່ານມີຄໍລໍາທີ່ທ່ານຕ້ອງການເອົາຄວາມສູງຂອງປ່ອງຢ້ຽມ, ຄວາມເລິກຂອງທໍາມະຊາດແມ່ນເພີ່ມຄວາມສູງ: 100%; ກັບອົງປະກອບນັ້ນ. ຫຼັງຈາກທີ່ທັງຫມົດ, ຖ້າທ່ານກໍານົດ width width: 100%; ອົງປະກອບຈະໃຊ້ເວລາພື້ນທີ່ນອນເຕັມຂອງຫນ້າ, ດັ່ງນັ້ນຄວາມສູງຄວນເຮັດວຽກຄືກັນ, ແມ່ນບໍ? ແຕ່ຫນ້າເສຍດາຍ, ນີ້ບໍ່ແມ່ນກໍລະນີເລີຍ.
ເພື່ອເຂົ້າໃຈວ່າເປັນຫຍັງມັນເກີດຂື້ນ, ທ່ານຕ້ອງເຂົ້າໃຈວ່າຕົວທ່ອງເວັບສາມາດຕີຄວາມສູງແລະຄວາມກວ້າງໄດ້. ຕົວທ່ອງເວັບເວັບໄຊຕ໌ calculates ຄວາມກວ້າງທີ່ມີທັງຫມົດເປັນຫນ້າທີ່ຂອງການເປີດກວ້າງຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ຖ້າທ່ານບໍ່ຕັ້ງຄ່າຄ່າ width ໃດໆໃນເອກະສານຂອງທ່ານ, ຕົວທ່ອງເວັບຈະລຸດເນື້ອຫາໂດຍອັດຕະໂນມັດເພື່ອໃຫ້ກວ້າງຄວາມກວ້າງຂອງຫນ້າຈໍ (100% width ແມ່ນຄ່າເລີ່ມຕົ້ນ).
ມູນຄ່າຄວາມສູງຖືກຄິດໄລ່ແຕກຕ່າງຈາກຄວາມກວ້າງ. ໃນຄວາມເປັນຈິງ, ຕົວທ່ອງເວັບບໍ່ໄດ້ປະເມີນຄວາມສູງທັງຫມົດເວັ້ນເສຍແຕ່ວ່າເນື້ອຫາຍາວເກີນໄປທີ່ມັນຈະຢູ່ນອກມຸມເບິ່ງ (ດັ່ງນັ້ນຕ້ອງມີແຖບເລື່ອນ) ຫຼືຖ້າຜູ້ອອກແບບເວັບກໍານົດຄວາມສູງຢ່າງແທ້ຈິງຂອງອົງປະກອບໃນຫນ້າ. ຖ້າບໍ່ດັ່ງນັ້ນ, ຕົວທ່ອງເວັບພຽງແຕ່ເຮັດໃຫ້ເນື້ອໃນໄຫຼພາຍໃນ width ຂອງ viewport ຈົນກວ່າມັນຈະສິ້ນສຸດ. ຄວາມສູງບໍ່ໄດ້ຄິດໄລ່ຕົວຈິງເລີຍ.
ບັນຫາເກີດຂື້ນໃນເວລາທີ່ທ່ານກໍານົດລະດັບຄວາມສູງໃນອົງປະກອບທີ່ມີອົງປະກອບແມ່ບໍ່ມີຄວາມສູງ - ໃນຄໍາສັບຕ່າງໆອື່ນ, ອົງປະກອບແມ່ມີຄວາມສູງໃນຕອນຕົ້ນ: auto; ທີ່ຢູ່ ໃນຕົວຈິງແລ້ວ, ທ່ານຂໍໃຫ້ຕົວທ່ອງເວັບຄິດໄລ່ຄວາມສູງຈາກຄ່າທີ່ບໍ່ຖືກກໍານົດ. ເນື່ອງຈາກວ່າມັນຈະເທົ່າກັບຄ່າ null, ຜົນໄດ້ຮັບແມ່ນວ່າຕົວທ່ອງເວັບບໍ່ມີຫຍັງ.
ຖ້າທ່ານຕ້ອງການກໍານົດຄວາມສູງໃນຫນ້າເວັບຂອງທ່ານເປັນເປີເຊັນ, ທ່ານຕ້ອງກໍານົດລະດັບຄວາມສູງຂອງອົງປະກອບແມ່ບົດທີ່ຕ້ອງການຄວາມສູງທີ່ກໍານົດ. ໃນຄໍາສັບຕ່າງໆອື່ນ, ຖ້າທ່ານມີຫນ້າເຊັ່ນນີ້:
ເນື້ອຫາທີ່ນີ້
ທ່ານອາດຈະຕ້ອງການ div ແລະວັກໃນມັນໃຫ້ມີຄວາມສູງ 100%, ແຕ່ວ່າ div ນັ້ນກໍ່ມີ ສອງ ອົງປະກອບແມ່:
ແລະ. ໃນຄໍາສັ່ງເພື່ອກໍານົດຄວາມສູງຂອງ div ກັບຄວາມສູງຂອງພີ່ນ້ອງ, ທ່ານຕ້ອງກໍານົດຄວາມສູງຂອງຮ່າງກາຍແລະອົງປະກອບ html ເຊັ່ນກັນ.
ດັ່ງນັ້ນ, ທ່ານຈໍາເປັນຕ້ອງໃຊ້ CSS ເພື່ອຕັ້ງຄ່າຄວາມສູງຂອງບໍ່ພຽງແຕ່ div ເທົ່ານັ້ນ, ແຕ່ຍັງມີອົງປະກອບຮ່າງກາຍແລະ html. ນີ້ສາມາດເປັນສິ່ງທ້າທາຍ, ເພາະວ່າທ່ານສາມາດໄດ້ຮັບການປະເຊີນຫນ້າກັບທຸກສິ່ງທຸກຢ່າງທີ່ຖືກກໍານົດໃຫ້ສູງເຖິງ 100%, ພຽງແຕ່ເພື່ອບັນລຸຜົນທີ່ຕ້ອງການນີ້ເທົ່ານັ້ນ.
ບາງສິ່ງທີ່ຄວນສັງເກດເມື່ອເຮັດວຽກກັບຄວາມສູງ 100%
ໃນປັດຈຸບັນທີ່ທ່ານຮູ້ວິທີການກໍານົດລະດັບຄວາມສູງຂອງອົງປະກອບຂອງຫນ້າຂອງທ່ານໃຫ້ເປັນ 100%, ມັນອາດຈະຫນ້າຕື່ນເຕັ້ນທີ່ຈະອອກແລະເຮັດສິ່ງນັ້ນໃຫ້ກັບຫນ້າເວັບທັງຫມົດ, ແຕ່ມີບາງສິ່ງທີ່ທ່ານຄວນຮູ້ເຖິງ:
- ຮາກແລະການປ້ອນຂໍ້ມູນສາມາດເພີ່ມແຖບເລື່ອນທີ່ທ່ານບໍ່ຕ້ອງການ. ຫນຶ່ງໃນສິ່ງທີ່ຫນ້າລໍາຄານທີ່ສຸດທີ່ຂ້ອຍພົບກັບການເຮັດວຽກກັບຄວາມສູງສ່ວນຮ້ອຍ (ແລະຄວາມກວ້າງ) ແມ່ນວ່າຫຼັງຈາກນັ້ນ padding ແລະຂອບຂອງອົງປະກອບດຽວກັນສາມາດເພີ່ມແຖບເລື່ອນໄປຫາຫນ້າ, ເຖິງແມ່ນວ່າເນື້ອຫາທັງຫມົດຈະສະແດງໂດຍບໍ່ຕ້ອງການແຖບເລື່ອນ. ນີ້ແມ່ນຍ້ອນວ່າຄວາມສູງຫຼືຄວາມກວ້າງຂອງອົງປະກອບແມ່ນສິ່ງທໍາອິດທີ່ຖືກຄິດໄລ່. ຫຼັງຈາກນັ້ນ, ຂອບແລະ paddings ໄດ້ຖືກເພີ່ມສຸດ. ດັ່ງນັ້ນ, ຖ້າທ່ານມີອົງປະກອບທີ່ມີລະດັບຄວາມສູງ 100% ແລະຂອບຂອບທາງລຸ່ມແລະ 10 ນິ້ວ, ມັນຈະມີແຖບເລື່ອນສໍາລັບ 20 ພິກະເຊນພິເສດ. ຈົ່ງຈື່ວ່າຮູບແບບກ່ອງ CSS ເພີ້ມຂອບ, ຂອບແລະຂອບໃສ່ຂະຫນາດຂອງອົງປະກອບ, ດັ່ງນັ້ນ 100% ກັບຄ່າຂອງແບບອື່ນໆຂອງປ່ອງເຫຼົ່ານີ້ຈະສູງກວ່າ 100%.
- ຖ້າເນື້ອຫາຂອງທ່ານສູງກວ່າລະດັບທີ່ກໍານົດໄວ້ແລ້ວ, ມັນຈະ overwrite ໃດກໍ່ຕາມຫຼັງຈາກນັ້ນ. ໃນຄໍາສັບຕ່າງໆອື່ນ, ຖ້າທ່ານມີການອອກແບບທີ່ມີຄໍລໍາທີ່ສູງເຖິງ 80%, ເນື້ອຫາທີ່ຢູ່ພາຍໃນນັ້ນຈະກວມເອົາ 100% ຂອງຄວາມສູງ, ສ່ວນທີ່ເຫຼືອ 20% ຈະສືບຕໍ່ຢູ່ຂ້າງລຸ່ມນີ້ແລະເຮັດໃຫ້ການອອກແບບຮູບພາບ ຂອງຫນ້າຂອງທ່ານ. ຖ້າມີເນື້ອຫາພາຍໃຕ້ຄໍລໍານັ້ນ, ຂໍ້ຄວາມຈະຂຽນພຽງແຕ່ເທິງສຸດຂອງມັນ. ຂ້ອຍມັກຈະເຫັນສິ່ງນີ້ເກີດຂຶ້ນເມື່ອຜູ້ອອກແບບເວັບພະຍາຍາມບັງຄັບຄວາມສູງຂອງຫນ້າແລະໄດ້ຮັບການເຮັດວຽກຢ່າງເຫມາະສົມສໍາລັບການເປີດຕົວ, ແຕ່ເມື່ອເນື້ອໃນກ່ຽວກັບຫນ້ານັ້ນມີຄວາມປ່ຽນແປງໃນອະນາຄົດ, ຄວາມສູງຂອງເຂົາເຈົ້າທັງຫມົດເຮັດໃຫ້ການໄຫຼຂອງຫນ້າ. ນີ້ແມ່ນຄວາມຈິງສອງເທື່ອໃນເວລາທີ່ທ່ານກໍາລັງສ້າງເວັບໄຊທ໌ຕອບສະຫນອງທີ່ມີຄວາມກວ້າງແລະຄວາມສູງຕ້ອງປ່ຽນແປງດ້ວຍຂະຫນາດຂອງ viewport.
ເພື່ອແກ້ໄຂບັນຫານີ້, ທ່ານສາມາດຕັ້ງຄ່າຄວາມສູງຂອງອົງປະກອບເຊັ່ນດຽວກັນ. ຖ້າທ່ານຕັ້ງຄ່າໃຫ້ອັດຕະໂນມັດ, ແຖບເລື່ອນຈະປາກົດຖ້າພວກເຂົາຕ້ອງການແຕ່ຫາຍໄປເມື່ອພວກເຂົາບໍ່ໄດ້. ທີ່ແກ້ໄຂການພັກຜ່ອນຕາ, ແຕ່ວ່າມັນເພີ່ມ scrollbars ບ່ອນທີ່ທ່ານອາດຈະບໍ່ຕ້ອງການໃຫ້ພວກເຂົາ.
ການໃຊ້ Viewport Units
ອີກວິທີຫນຶ່ງທີ່ທ່ານສາມາດແກ້ໄຂບັນຫານີ້ແມ່ນເພື່ອທົດລອງໃຊ້ກັບ CSS Viewport Units. ໂດຍການໃຊ້ຫນ່ວຍວັດການວັດແທກ ຄວາມສູງ ຂອງ viewport , ທ່ານສາມາດຂະຫນາດອົງປະກອບທີ່ຈະເອົາເຖິງຄວາມສູງທີ່ກໍານົດໄວ້ຂອງ viewport, ແລະທີ່ຈະປ່ຽນແປງໃນຖານະສະແດງ viewport. ນີ້ແມ່ນວິທີທີ່ດີທີ່ຈະໄດ້ຮັບພາບສູງສຸດ 100% ຂອງທ່ານໃນຫນ້າແຕ່ຍັງຄົງມີຄວາມຍືດຫຍຸ່ນໃນອຸປະກອນຕ່າງໆແລະຂະຫນາດຫນ້າຈໍ.