Веб-сайт дизайнындағы әдеттегі сұрақ: «элементтің биіктігін 100% -ға қалай орнатасыз?»
Бұл оңай жауап ретінде көрінуі мүмкін. Сіз элементті биіктігін 100% етіп орнату үшін CSS- ды қолданасыз, бірақ бұл әрқашан бұл элементті бүкіл браузер терезесіне сәйкестендіру үшін созбайды. Неліктен бұл визуалды стильге жету үшін не істей алатындығын білейік.
Пиксельдер және пайыздар
Элемент биіктігін CSS сипатын және пикселдерді пайдаланатын мәнді анықтаған кезде, бұл элемент браузерде осы тік кеңістікке ие болады.
Мысалы, биіктігі бар параграф: 100px; сіздің дизайныңызда 100 пиксель тік кеңістік алады. Браузер терезесінің қаншалықты көбірек болғаны маңызды емес, бұл элемент биіктігі 100 пиксел болады.
Пайыздар пикселден өзгеше жұмыс істейді. W3C спецификациясына сәйкес пайыздық биіктіктер контейнердің биіктігіне қатысты есептеледі. Сондықтан егер сіз биіктігі бар абзацты енгізсеңіз: 50%; 100px биіктіктегі div ішіндегі параграфта биіктігі 50 пиксель болады, бұл 50% ата-аналық элемент.
Неліктен биіктік пайызы сәтсіздікке ұшырады
Егер сіз веб-бетті жобалап жатсаңыз және сізде терезенің толық биіктігін көтергіңіз келетін бағаныңыз бар болса, онда табиғи биіктік биіктікті қосу керек: 100%; бұл элементке. Ақыр соңында ені енге орнатылса: 100%; элемент парақтың толық көлденең кеңістігін алады, сондықтан биіктік бірдей жұмыс істеу керек пе? Өкінішке орай, бұл мүлдем жоқ.
Мұның неге екенін түсіну үшін браузерлердің биіктігі мен енін қалай түсінетінін түсінуіңіз керек. Веб-браузерлер браузер терезесінің қаншалықты кең ашылатындығын функция ретінде жалпы қол жетімді енін есептейді. Құжаттарыңыздың ендік мәндерін орнатпаған болсаңыз, шолғыш терезенің толық енін толтыру үшін мазмұнды автоматты түрде ағызады (100% ені әдепкі болып табылады).
Биіктік мәні енден басқа есептеледі. Шын мәнінде, браузерлер мазмұнның сыртқы көрінісінен (яғни айналдыру жолақтарын талап етеді) тыс болғанша немесе веб-дизайнер беттегі элемент үшін абсолютті биіктікті орнатпайтын болса, биіктігі мүлдем бағаланады. Әйтпесе, браузер мазмұн ағынын қарап шығу терезесінің еніне аяғына дейін жеткізуге мүмкіндік береді. Биіктігі іс жүзінде есептелмейді.
Биіктіктер орнатылмаған ата-аналық элементтері бар элементте пайыздық биіктікті орнатқанда қиындықтар пайда болады - басқаша айтқанда, ата-аналық элементтердің әдепкі биіктігі бар: auto; . Шын мәнінде браузерден анықталмаған мәннен биіктікті есептеуді сұрайсыз. Нөлдік мәнге тең болатындықтан, нәтиже браузер ештеңе істемейді.
Егер веб-беттерде биіктікті пайызға орнатқыңыз келсе, биіктік анықталатын әрбір басты элементінің биіктігін орнатуыңыз керек. Басқаша айтқанда, келесідей бет бар болса:
Мазмұн мұнда
Бәлкім, div және оның параграфында 100% биіктікке ие болуын қаласаңыз да, бұл дивизионның екі негізгі элементі бар:
және. Div биіктігін салыстырмалы биіктікті анықтау үшін, сіз дененің биіктігін және html элементтерін де орнатыңыз.
Сондықтан, сіз CSS-ді ғана емес, дене және html элементтерінің биіктігін орнату үшін CSS-ні пайдалануыңыз қажет. Бұл қиындық тудыруы мүмкін, өйткені сіз 100% биіктікке орнатылған барлық нәрселермен тез арада шапшаң аласыз.
100% биіктікте жұмыс істегенде ескерту керек кейбір нәрселер
Енді сіздің бетіңіздің элементтерінің биіктігін 100% деңгейіне орнатуды білетін болсаңыз, барлық беттеріңізге шығып, оны жасауға қызықты болуы мүмкін, бірақ сіз білетін бірнеше нәрсе бар:
- Жақтаудың және толтырғыштың қалауыңызша қайыру жолағын қосуға болады. Пайыздық биіктікте жұмыс істеген кезде тапқан ең тітіркендіргіш заттардың бірі (ені мен ені) сол мазмұндағы мазмұнды жылжыту жолақтарын қажет етпей көрінсе де, сол элементтердегі толтырғыштар мен жақтаулар беттерге жылжыту жолақтарын қоса алады. Себебі элементтің биіктігі немесе ені - есептелетін бірінші нәрсе. Содан кейін, шеттер мен үстемелер қосылады. Егер сізде 100% биіктігі бар элемент болса және әрқайсысы 10 пиксельдің үстіңгі және төменгі жиектері болса, қосымша 20 пиксел үшін жылжыту жолағы болады. Естеріңізге сала кетейік, CSS қорап үлгісі маржаны, шекараны және элементтің өлшемін толтырады, сондықтан басқа қорап үлгісі мәндерінің кез келгенімен 100% 100% -дан артық болады.
- Егер сіздің мазмұныңыз анықталған биіктіктен көп болса, ол кейін бірдеңені қайта жазады. Басқаша айтқанда, сіз биіктігі 80% болатын бағанмен дизайныңыз болса және оның ішіндегі мазмұн биіктігі 100% -ды құраса, бұл қосымша 20% бағанды төмен қарай жалғастырады және визуалды дизайнды бұзады Сіздің бетіңіздің. Егер сол бағандағы мазмұн бар болса, онда мәтін тек үстіңгі жағын жазады. Веб-дизайнер беттің биіктігін күштеп тырысады және оны іске қосу үшін жақсы жұмыс істейді, бірақ сол беттегі мазмұн болашақта өзгергенде, олардың абсолюттік биіктіктері бет ағынын толығымен бұзады. Бұл ені мен биіктігі қарау портының өлшемімен өзгеруі тиіс жауап беретін веб-сайттарды құру кезінде екі есе шын.
Мұны түзету үшін элементтің биіктігін де орнатуға болады. Оны автоматты түрде орнатсаңыз, қажет болғанда жылжыту жолақтары пайда болады, бірақ олар болмаған кезде жойылады. Бұл көрнекі үзілімді түзетеді, бірақ оларды қалауыңыз мүмкін қайырмалы жолақтарды қосады.
Viewport бірліктерін пайдалану
Бұл тапсырманы шешудің тағы бір жолы - CSS Viewport бірліктерімен тәжірибе жасау. Көріністің биіктігін өлшеу бірлігін пайдалана отырып, көрініс портының белгілі бір биіктігін қабылдау элементтерін өлшеуіңізге болады және бұл көрініс өзгерісі ретінде өзгереді! Бұл бетіңізде 100% биіктік визуалды алудың керемет жолы, бірақ әр түрлі құрылғылар мен экран өлшемдері үшін икемді болуы мүмкін.