Шырока задаюць пытанне ў дызайне сайта з'яўляецца «як усталяваць вышыню элемента да 100%»?
Гэта можа здацца просты адказ. Можна проста выкарыстоўваць CSS , каб усталяваць вышыню элемента да 100%, але гэта не заўсёды расцягваць гэты элемент , каб адпавядаць ўсё акно браўзэра. Давайце высветлім, чаму гэта адбываецца і што вы можаце зрабіць, каб дасягнуць гэтага візуальнага стылю.
Пікселі і адсоткі
Пры вызначэнні вышыні элемента , выкарыстоўваючы ўласцівасць CSS і значэнне , якое выкарыстоўвае пікселі, то гэты элемент будзе займаць так шмат вертыкальнага прасторы ў браўзэры.
Напрыклад, пункт з вышынёй: 100px; будзе займаць 100 пікселяў вертыкальнага прасторы ў вашым design.It не мае значэння, наколькі больш акно браўзэра, то гэты элемент будзе 100 пікселяў ў вышыню.
Адсоткавыя суадносіны працуе інакш, чым пікселі. Паводле спецыфікацыі W3C, працэнт вышыні вылічаецца адносна вышыні кантэйнера. Так што, калі вы паставіце пункт з вышынёй: 50%; ўнутры DIV з вышынёй 100px, абзац будзе 50 пікселяў ў вышыню, што складае 50% з яго бацькоўскага элемента.
Чаму ў працэнтах Вышыні няўдачы
Калі вы распрацоўваеце вэб-старонку, і ў вас ёсць слупок, які вы хацелі б узяць на сябе ўсю вышыню акна, натуральны нахіл, каб дадаць вышыню: 100%; да гэтага элементу. У рэшце рэшт, калі вы ўсталюеце шырыню ў шырыню: 100%; элемент будзе займаць усё гарызантальнае прастору старонкі, так што вышыня павінна працаваць так жа, праўда? На жаль, гэта не так.
Каб зразумець, чаму гэта адбываецца, вы павінны разумець, як браўзэры інтэрпрэтуюць вышыню і шырыню. Вэб-браўзэры вылічыць агульную даступную шырыню ў залежнасці ад як шырока адкрываецца акно браўзэра. Калі вы не ўсталёўваць якія-небудзь значэнні шырыні на дакументах, браўзэр будзе аўтаматычна выцякаць змесціва, каб запоўніць усю шырыню акна (шырыня 100% па змаўчанні).
Значэнне Вышыня разлічваецца інакш, чым шырыня. На самай справе, браўзэры не ацаніць вышыню на ўсіх, калі змест не так доўга, што яна выходзіць за межы акна прагляду (што патрабуе пракруткі) або калі вэб-дызайнер ўсталёўвае абсалютную вышыню элемента на старонцы. У адваротным выпадку, браўзэр проста дазваляе паток кантэнту ў межах шырыні акна прагляду, пакуль не даходзіць да канца. Вышыня фактычна не разлічана на ўсіх.
Праблемы ўзнікаюць, калі вы ўсталюеце вышыню ў працэнтах ад элемента, які мае бацькоўскія элементы без вышыні, усталяванай - іншых слоў, бацькоўскія элементы маюць вышыню па змаўчанні: аўто; , Вы, па сутнасці, папрасіўшы браўзэр, каб вылічыць вышыню ад нявызначанага значэння. Так што раўнялася б нулявое значэнне, то вынік у тым, што браўзэр не робіць нічога.
Калі вы хочаце ўсталяваць вышыню на вашых вэб - старонак у працэнтах, вы павінны ўсталяваць вышыню кожнага бацькоўскага элемента , які вы хочаце вышыня вызначана. Іншымі словамі, калі ў вас ёсць старонка, як гэта:
ўтрыманне тут
Хутчэй за ўсё , вы хочаце , DIV і пункт у ім , каб мець вышыню на 100%, але на самой справе Div мае два бацькоўскіх элементаў:
і. Для таго, каб вызначыць вышыню спраў да адноснай вышыні, вы павінны ўсталяваць вышыню цела і HTML элементаў, а таксама.
Такім чынам, вы павінны выкарыстоўваць CSS, каб усталяваць вышыню не толькі DIV, але і кузаўных элементаў і HTML. Гэта можа быць праблемай, так як вы можаце хутка атрымаць заваленыя ўвесь час усталяваны на 100% вышыні, толькі для дасягнення гэтага жаданага эфекту.
Некаторыя рэчы, якія варта звярнуць увагу пры працы з 100% Хайтс
Зараз, калі вы ведаеце, як усталяваць вышыню вашых элементаў старонкі на 100%, гэта можа быць цікава выйсці і зрабіць гэта на ўсе старонкі, але ёсць некалькі рэчаў, якія вы павінны ведаць:
- Поля і водступы можна дадаць паласу пракруткі , дзе вы гэтага не хочаце. Адна з самых раздражняльных рэчаў, якія я знайшоў з працай з працэнтнымі вышынямі (і шырынёй), што затым водступы і палі на тыя ж элементы можна дадаць паласы пракруткі старонкі, нават калі ўсё змесціва адлюстроўваецца без неабходнасці прагорткі. Гэта адбываецца таму, што вышыня або шырыня элемента з'яўляецца першай рэччу, якая вылічаецца. Тады поля і водступы дадаюцца. Так што калі ў вас ёсць элемент з вышынёй 100% і верхняга і ніжняга палёў 10 пікселяў кожны, будзе паласа пракруткі для дадатковых 20 пікселяў. Памятаеце, што мадэль блокавай дадае край, межы і водступы на памер элемента, так што 100% з любым з гэтых іншых значэнняў вокны мадэлі будзе на самой справе больш чым 100%.
- Калі змесціва займае больш вызначаную вышыню, ён перапіша нічога пасля гэтага. Іншымі словамі, калі ў вас ёсць дызайн са слупком, які ў вышыню 80%, а ўтрыманне, якое знаходзіцца ўсярэдзіне будзе займаць 100% вышыні, што дадатковыя 20% будуць працягваць ніжэй калоны і разарваць візуальны дызайн вашай старонкі. Калі ўтрыманне ніжэй гэтага слупка, тэкст будзе проста пісаць па-над ім. Я часта бачу, гэта адбываецца, калі вэб-дызайнер спрабуе прымусіць вышыню старонкі і атрымлівае гэта выдатна працуе для запуску, але калі ўтрыманне гэтага змены старонкі ў будучыні, іх абсалютныя вышыні цалкам парушыць паток старонкі. Гэта ўдвая дакладна, калі вы будуеце адаптыўныя сайты, шырыня і вышыня павінна змяняцца з памерам акна прагляду.
Каб выправіць гэта, вы можаце ўсталяваць вышыню элемента, а таксама. Калі вы ўсталюеце яго на аўто, паласы пракруткі будуць з'яўляцца, калі яны неабходныя, але знікаюць, калі яны не з'яўляюцца. Гэта фіксуе візуальны разрыў, але ён дадае паласы пракруткі, дзе вы не можаце хацець іх.
Выкарыстанне краявіднага экрана Адзінкі
Іншым спосабам вы можаце вырашыць гэтую праблему, каб эксперыментаваць з CSS VIEWPORT адзінак. З дапамогай блока вышыні краявіднага вымярэння, вы можаце элементы памеру , каб заняць пэўную вышыню акна прагляду, і што будзе мяняцца па меры змяненняў краявіднага экрана! Гэта выдатны спосаб атрымаць 100% візуальныя вышыні на старонцы, але да гэтага часу ім быць гнуткімі для розных прылад і памераў экрана.