Bawo ni lati lo CSS lati Ṣeto Iwọn ti HTML HTML si 100%

Ibeere ti o wọpọ ni apẹrẹ aaye ayelujara ni "bawo ni o ṣe ṣeto awọn iga ti ohun to 100%"?

Eyi le dabi imọran ti o rọrun. O lo CSS nikan lati ṣeto awọn iga ti ẹya kan si 100%, ṣugbọn eyi kii ṣe isanmọ nigbagbogbo lati fi ipele ti window gbogbo ẹrọ kiri. Jẹ ki a wa idi idi ti eyi ṣe ati ohun ti o le ṣe lati ṣe aṣeyọri ara yi.

Awọn piksẹli ati awọn ogorun

Nigba ti o ba ṣọkasi iga ti ohun elo nipa lilo ohun elo CSS ati iye kan ti o nlo awọn piksẹli, irọri naa yoo gba iru aaye to ni aaye to ni ẹrọ lilọ kiri ayelujara naa.

Fun apẹẹrẹ, paragira kan ti o ni giga: 100px; yoo gba 100 awọn piksẹli ti aaye inaro ninu rẹ design.It ko ṣe pataki bi o tobi window window browser jẹ, yi ano yoo jẹ 100 awọn piksẹli ni iga.

Awọn ogorun ọgọrun ṣiṣẹ yatọ si awọn piksẹli. Gegebi asọye W3C, awọn ifilelẹ ti oṣuwọn ni a ṣe iṣiro pẹlu ọwọ si ibi ti o wa ni ibiti. Nitorina ti o ba fi paragile kan pẹlu giga: 50%; Ninu iṣọpọ pẹlu iwọn 100px, paragira yoo jẹ 50 pixels ni giga, eyiti o jẹ 50% ti o jẹ obi obi.

Idi ti ogorun Ogorun Gbọ

Ti o ba n ṣe ojuwe wẹẹbu kan, ati pe o ni iwe kan ti o fẹ lati gbe kikun ti window, oju-ọna ti ara jẹ lati fi iga kan: 100%; si eleyi. Lẹhinna, ti o ba ṣeto iwọn si iwọn: 100%; aṣoju yoo gba aaye ti o wa ni kikun ti oju iwe, nitorina iga yẹ ki o ṣiṣẹ kanna, ọtun? Laanu, eyi kii ṣe ọran ni gbogbo.

Lati ye idi ti eyi ṣe, o gbọdọ ni oye bi awọn aṣàwákiri ṣe túmọ iyatọ ati iwọn. Awọn aṣàwákiri wẹẹbù ṣe iṣiro lapapọ iwọn lapapọ to wa bi iṣẹ kan ti bii a ti ṣi window window kiri. Ti o ko ba ṣeto awọn iwọn ijinlẹ lori awọn iwe aṣẹ rẹ, aṣàwákiri naa yoo ṣaṣe awọn iṣọrọ naa laifọwọyi lati kun gbogbo iwọn ti window (100% iwọn ni aiyipada).

Iwọn didara ni iṣiro yatọ si iwọn. Ni otitọ, awọn aṣàwákiri ko ṣe akojopo iga ni gbogbo ayafi ti akoonu naa ba pẹ to pe o lọ ni ita ti wiwo ilẹ (nitorina o nilo awọn ifilohun oniru) tabi ti o ba jẹ pe onise wẹẹbu ṣeto ipẹ to ga fun idi kan lori oju-iwe naa. Bibẹkọ ti, aṣàwákiri naa jẹ ki iṣakoso akoonu laarin iwọn ti wiwo titi o fi de opin. Iwọn ko ni gangan iṣiro rara.

Awọn iṣoro waye nigba ti o ba ṣeto ipin ogorun kan lori ipinnu ti o ni awọn eroja obi lai si awọn ibi giga ṣeto - ni awọn ọrọ miiran, awọn eroja obi ni aaye aiyipada: auto; . O jẹ, ni itumọ, béèrè lọwọ aṣàwákiri lati ṣe iṣiro iga kan lati iye ti a ko yan. Niwon pe eyi yoo dogba iye asan, abajade ni pe aṣàwákiri ko ṣe ohunkohun.

Ti o ba fẹ ṣeto aaye giga lori awọn oju-iwe ayelujara rẹ si ipin ogorun, o ni lati ṣeto iga ti gbogbo ẹbi òbí ti ọkan ti o fẹ ki a ṣe agbelewọn iga. Ni awọn ọrọ miiran, ti o ba ni oju-iwe kan bi eyi:





Akoonu nibi



O le ṣefẹ ki ipin ati paragilefin ti o wa ni iwọn 100%, ṣugbọn ti o ṣẹ ni o ni awọn eroja obi meji :

ati. Lati le ṣọkasi iga ti div si ipo giga, o gbọdọ ṣeto iga ti ara ati awọn eroja html naa.

Nitorina o nilo lati lo CSS lati ṣeto awọn iga ti ko nikan ni div, ṣugbọn tun ara ati awọn eroja html. Eyi le jẹ ipenija, niwon o le ni kiakia pẹlu ohun gbogbo ti a ṣeto si 100% iga, nikan lati ṣe aṣeyọri ipa ti o fẹ yii.

Diẹ ninu awọn Ohun Lati Ṣakiyesi Nigbati Nṣiṣẹ pẹlu 100% Giga

Nisisiyi pe o mọ bi a ṣe le ṣeto awọn giga ti awọn oju-iwe rẹ si 100%, o le jẹ igbadun lati jade lọ ṣe eyi si gbogbo awọn oju-iwe rẹ, ṣugbọn awọn nkan diẹ ti o yẹ ki o wa ni:

Lati ṣatunṣe eyi, o le ṣeto iga ti iwo naa daradara. Ti o ba ṣeto si idojukọ, awọn ifilohun aṣawari yoo han bi wọn ba nilo ṣugbọn o farasin nigbati wọn ko ba jẹ. Eyi ṣe atunṣe fifọ oju-iwe, ṣugbọn o ṣe afikun awọn gẹẹsi nibiti o le ma fẹ wọn.

Lilo awọn Wiwọle Wiwo

Ọnà miiran ti o le ṣe idojukọ ọran yii ni lati ṣe idanwo pẹlu awọn Ikọja Wiwọle CSS. Nipa lilo wiwọn iwọn iwo ọna wiwo , o le iwọn awọn eroja lati gbe iduro ti a ti ṣafihan ti wiwo, ati pe eyi yoo yipada bi ayipada wiwo ọja! Eyi jẹ ọna ti o dara julọ lati gba awọn oju-wiwo 100% rẹ lori oju-iwe kan ṣugbọn si tun jẹ ki wọn rọ fun awọn ẹrọ oriṣiriṣi ati titobi iboju.