CSS – Blokk magassága a szélességéhez viszonyítva. A css szélesség és magasság paraméterek a html oldal elemeinek méretének beállításához Magasságot jelent

A css width tulajdonság felelős az elem tartalmával rendelkező terület szélességének értékéért.

Szélesség: érték | kamat | auto | örököl

A css height tulajdonság felelős az elem tartalmi területének magassági értékéért.

Magasság: érték | kamat | auto | örököl

Negatív magasság és szélesség értékek nem megengedettek.

Úgy tűnik, hogy ezekkel a CSS-tulajdonságokkal minden egyszerű és világos, de valójában minden nem olyan egyszerű.

A weboldal egy elemének 500 képpont szélességének beállítása nem jelenti azt, hogy az adott elem teljes szélessége legalább 500 képpont lesz.

A legfontosabb tudnivaló, hogy a szélesség és magasság tulajdonságok határozzák meg a tartalomterület szélességét és magasságát.

A szélesség és magasság tulajdonságok csak egyike azoknak az összetevőknek, amelyekből az elem teljes szélességét és magasságát számítják. Megadják a Tartalom terület szélességét és magasságát, ami a következő képen látható. A teljes szélesség és magasság kialakításában olyan tulajdonságok is szerepet játszanak, mint a párnázás, a margó és a szegély.

Ez most könnyen ellenőrizhető.

Vegyünk például két azonos szélességű blokkot, de ezek közül az egyik a padding tulajdonságot is beállítja.

Alapértelmezés szerint a weboldalak úgy viselkednek, hogy a megfelelő oldal kitöltése hozzáadódik a magasság és szélesség értékekhez.

Azok. az elem teljes szélessége az elem szélesség tulajdonságának értékéből, valamint a padding-left és a padding-right értékekből fog állni.

Mert különböző típusok oldalon található elemeket, az elemek teljes szélességét és magasságát speciális képletek segítségével számítják ki.

A weboldalakon található különböző típusú elemeknél a szélesség és magasság értékei eltérő viselkedésűek és eltérőek lehetnek.

Hasonló a helyzet a magasság tulajdonsággal is.

A CSS-nek van egy speciális algoritmusa, amely kiszámítja a szélességi és magassági értékeket különböző elemek egy weboldalon. Most nem foglalkozom ezzel az algoritmussal, mert kissé bonyolult.

Most a legfontosabb, hogy megértsük, hogy a szélességi és magassági tulajdonságok lehetővé teszik, hogy az elem tartalmához tartozó terület szélességével és magasságával dolgozzunk, nem pedig az elem teljes szélességével és magasságával.

Annak érdekében, hogy egy objektum meghatározott szélességet és magasságot kapjon, a CSS-nek két tulajdonsága van - szélessége és magassága (illetve). Segítségükkel fix méretű elemeket állíthat be, legyen az oldalsáv, kép, táblázat vagy bármilyen blokk.

A szélesség és magasság kiszámításának jellemzői

A CSS-ben bármilyen hosszegység használható egy objektum szélességének vagy magasságának meghatározására. A képpontokat a legkönnyebben megérteni. Ha százalékos jelölést használ, ne feledje, hogy ebben az esetben az objektum szélessége a szülő szélességétől függ. Ha nincs ilyen, akkor az elem szélességét a böngészőablak szélessége alapján számítja ki (amikor a felhasználó módosítja az ablak szélességét, a szélesség értéke újraszámításra kerül).

Az em mértékegység szélességi értékként is használható, ami megközelítőleg megegyezik a szöveg betűméretével, de csak tetszőleges mértékegységekben. Például beállíthatja a betűméretet 24 képpontra. Ekkor ennek az elemnek az 1em értéke 24 képpont lesz, és ha a szélességet állítja be: 2em , akkor a szélesség 2x24 képpont = 48 képpont. Ha a betűméret nincs beállítva, akkor az öröklődik.

A százalékban megadott magasság ugyanúgy számítható ki, mint a szélesség, de a számítás alapja a szülőelem magassága, nem pedig a szélessége. Ha a szülő hiányzik, a magasság a böngészőablak magasságától függ.

Százalékos szélesség és magasság gyermek elem a szülő mérete alapján számítják ki

Mit tartalmaz a szélesség és magasság

Érdemes azonnal megjegyezni, hogy a szélesség és magasság tulajdonságoknak van egy sajátosságuk - ezek nem tartalmazzák a margó, a párnázás és a szegély értékeit. A szélességhez/magassághoz beállított érték csak az elem tartalomterületének szélességét/magasságát jelenti.

Így például egy elem tényleges szélességének kiszámításához (az a hely, amelyet ténylegesen el fog foglalni a képernyőn), egy kis aritmetika szükséges. A tényleges szélesség olyan értékek összege, mint a szélesség, a kitöltés, a szegély és a margó. Emlékezzünk vissza, hogy korábban megnéztük, hogyan néz ki a CSS dobozmodell.

A tudás megszilárdítására mutatunk egy példát. Tegyük fel, hogy van egy ilyen stílusú eleme:

Szélesség: 200 képpont margó balra: 15 képpont; margó-jobb: 15 képpont; padding-bal: 10px border-left: 3px solid #333;

Egy elem tényleges szélességének kiszámításához adjuk hozzá:

szélesség + margó-bal + margó-jobb + kitöltés-bal + szegély-bal = 200px + 15px + 15px + 10px + 3px = 243 képpont (tényleges szélesség)

A magasság tulajdonság hasznos lehet, ha precíz szabályozásra van szüksége például egy kép magassága felett. Ha azonban a tároló szöveget vagy bármilyen más, eltérő magasságú tartalmat fog tartalmazni, erősen nem ajánlott fix magasságot beállítani a tároló számára, mivel az ilyen elrendezés váratlan eredményhez vezethet - a tartalom a tároló tetején jelenik meg. egyéb tartalom.

Rögzített magasság helyett használja a magasságot: auto - ez a bejegyzés azt jelenti, hogy az objektum magasságát a rendszer automatikusan kiszámítja a benne lévő tartalomtól függően.

Az elrendezés összeomlásának elkerülésének másik módja a túlcsordulás: auto jelölés használata. Ebben az esetben, ha a tartalom magassága meghaladja a tároló magasságát, a böngésző egy görgetősávot ad a tárolóhoz.

A következő leckében megtudhatja, hogyan bírálhatja felül egy elem szélességét egy érdekes és nagyon hasznos tulajdonság segítségével.

A HTML-ben a legtöbb elem általában meghatározott magasságot és szélességet kap. Ezeknek a paramétereknek a beállítása a CSS-ben meglehetősen egyszerű, és ennek eredményeként praktikus. Ehhez az Ön által már ismert magasság és szélesség tulajdonságokat használják. Ebben a leckében azonban nem rögzített szélességről és magasságról vagy gumiról fogunk beszélni, vagyis magának az ablaknak a szélességétől függően. Kezdjük el)

szélesség

Ez a tulajdonság egy HTML-elem konkrét szélességét állítja be. Az érték pixelben, százalékban adható meg (más értékeket ritkábban használnak).

Saját blokk (
szélesség: 400 képpont /* szélesség 400 képpont */

}
Vagy százalékban:

MyBlockPercent50 (
szélesség: 50% /* szélesség a doboz vagy az ablak szélességének 50%-a (ha nem fix szélességű dobozon belül) */
szín: #f1f1f1; /* világosszürke blokk */
}
Ennek megfelelően egy blokkot kapunk, amely mindig a szülő szélességének fele lesz.

Most a legérdekesebbről. A szélesség olyan paraméterekkel rendelkezik, amelyek meghatározzák a maximális vagy minimális szélességet. Ezek a min-width és max-width tulajdonságok. Értékeket is megadhat nekik pixelben, százalékban és egyéb értékekben. Ezek a tulajdonságok képezik az alapját a gumi és az adaptív tervek létrehozásának ().

Példa adaptív kialakítás . Nézd, a böngészőablak átméretezése:

Természetesen előre ugrom magam. De meg kell értened, mire és miért van szükséged. Igen, és érintse meg a kellemes eredményt)

Amint azt már megértette, ezen tulajdonságok segítségével rugalmasabban kezelheti az oldalon lévő elemeket a tartalom torzítása nélkül. Hogyan működik? Nézzük a kódot.

Blokk (
maximális szélesség: 800 képpont
háttérszín: #f1f1f1; /* világosszürke blokk */
kitöltés: 20 képpont
}
Az ezekkel a tulajdonságokkal rendelkező blokk 200 pixel szülőszélességgel felveszi a megfelelő értéket, de ha a szülőblokk nagyobb, például 1000 pixel, akkor már felveszi a maximális szélességét, azaz 800 pixelt. Azaz addig fog növekedni, amíg a szülőblokk szélessége 801 képpont vagy több lesz. Továbbá a blokk blokk maximális megengedett szélessége mindig 800 képpont.

magasság

Ez a tulajdonság felelős az elem magasságáért. Értékként ugyanazt a CSS-hez megfelelőt használják. Leggyakrabban ugyanazok a százalékok és pixelek.

info(
magasság: 200 képpont; /* blokk magassága 200 képpont lesz */
padding: 10px /* ismételje meg a blokkon belüli párnázást =) */
}
Ami logikus, a magasságnál megadható az elem minimális és maximális magassági értéke a min-height, illetve a max-height tulajdonságokkal.

info(
maximális magasság: 360 képpont /* maximális blokk magasság */
minimális magasság: 120 képpont; /* minimális blokk magasság */
}
Amint látja, a tulajdonságokat lehet, és gyakran kell is használni párban.
Vagy kombinálja az értékeket:

Tartalom(
magasság: 100%; /* magasság mindig 100% */
szélesség: 760 képpont /* de a szélesség fix 760 pixel */
}
Ha kérdésed van, írd meg kommentben!

Köszönöm a figyelmet! Sok sikert az elrendezéshez!)

Sziasztok kedves olvasók! Ma megnézzük, hogyan lehet beállítani egy weboldal blokkelemeinek méretét a használatával css tulajdonságaités konfigurálja a tartalom megjelenítését arra az esetre, ha az nem férne el az elemben.

szélesség és magasság - elemek szélessége és magassága a css-ben

A szélesség és magasság stílusattribútumok segítségével beállíthatja a blokkelemek szélességét és magasságát:

szélesség: auto|<ширина>|örökölni
magasság:auto|<ширина>|örökölni

Értékként bármilyen css-ben elérhető mértékegység használható – például pixel (px), hüvelyk (inch), pont (pt) stb.:

p(szélesség:200px; magasság:150px)

Az abszolút mértékegységeken kívül beállíthatja az elemek méretének relatív értékét százalékban. Ebben az esetben az elem szélessége és magassága a szülőelem szélességétől és magasságától függ. Ha a szülő nincs kifejezetten megadva, akkor a méretek a böngészőablaktól függenek.

oszt (szélesség:40%;)

Az automatikus érték megadja az elem méretének szabályozását a webböngészőnek, és ez az alapértelmezett érték. Ebben az esetben az elem méretei olyanok lesznek, hogy teljesen illeszkedjen az összes tartalmához.

Nézzünk néhány példát.

Eredmény:

Ebben a példában létrehoztunk egy div blokkot, és beágyaztunk egy p bekezdést szöveggel. A div esetében szigorúan 300 x 300 pixelre állítottuk be a méreteket. A p elem szélessége és magassága tulajdonság értékei automatikusra vannak állítva, így amint a képernyőképen is látható, a szélessége megegyezik a szülőelem szélességével, magassága pedig úgy van beállítva, hogy a bekezdésben található teljes szöveghez illeszkedjen.

Most változtassuk meg a p bekezdés css beállításait, és állítsunk be rögzített méreteket:

réteg2(
háttér: #eee;
szélesség: 250 képpont;
}

Eredmény:

Amint láthatja, a bekezdés szélessége szűkült és 250 pixel, magassága pedig nőtt, hogy a szöveg elférjen, mivel a magasság paraméter továbbra is egyenlő marad az auto értékkel.

Most állítsuk be a bekezdés magasságát és szélességét százalékban:

réteg2(
háttér: #eee;
szélesség:50%;
magasság:50%;
}

Eredmény:

Ahogy a képen is látható, a p elem szélessége a szélesség felével egyenlővé vált div elem. A magasság pedig a div magasságának 75 százalékára nőtt.

Bármely elem szélességének és magasságának relatív mértékegységben történő megadásakor előfordulhat, hogy meg kell adnia a lehetséges legkisebb és maximális méretet. Hiszen például a böngészőablak átméretezésekor az elem mérete csökkenhet és olyan méretűre nőhet, hogy az oldal olvashatósága nagyon alacsony lesz.

A minimális szélességet és magasságot a min-width és min-height attribútumokkal határozhatja meg:

min-szélesség:<ширина>
min-magasság:<высота>

A hasonló stílusú max-width és max-height attribútumok lehetővé teszik a maximális méretek beállítását:

maximális szélesség:<ширина>
maximum magasság:<высота>

Nyilvánvaló, hogy a magasság és a szélesség maximális és minimális értékének beállításakor az elem méretei nem lehetnek nagyobbak a maximumnál és kisebbek a minimális értékeknél.

Érdemes tisztázni, hogy a feladat a magasság és szélesség paramétereknek csak a blokkcímkék esetében van értelme, mivel a soron belüli elemeknél ezeket a paramétereket nem dolgozza fel a böngésző.

Előfordulhat, hogy ha merev magassági és szélességi paramétereket állít be egy elemhez, akkor az abban található tartalom nem fér bele a korlátozott területbe.

Például csökkentsük a p bekezdés méretét a fenti példákból 100 pixelre:

réteg2(
háttér: #eee;
szélesség: 100 képpont;
magasság: 100 képpont;
}

Eredmény:

Amint látható, a szöveg túllépett a bekezdés határain, és nem tűnik túl szépnek. Az ilyen helyzetek elkerülése érdekében van egy css-szabály - túlcsordulás.

túlcsordulási paraméter a tartalom elrejtéséhez (rejtett, látható) vagy görgetéséhez (görgetés, automatikus).

Tartalomtúlcsordulás akkor fordulhat elő, ha egy elem szélessége és magassága egyaránt korlátozott. Vegyünk két bekezdést:

Első bekezdés szövege

Második bekezdés szövege

Eredmény:

Mivel sem szélesség, sem magasság nincs megadva a bekezdésekhez, a böngésző saját maga számítja ki azokat az automatikus érték saját értelmezése alapján. Ennek eredményeként a bekezdések szélességben az összes rendelkezésre álló helyet elfoglalták, magasságban pedig a bennük lévő tartalomnak megfelelően.

Most korlátozzuk az első bekezdés szélességét:

Első bekezdés szövege

Második bekezdés szövege

Eredmény:

A bekezdés szélessége várhatóan csökken, a magasság pedig úgy van beállítva, hogy a teljes szöveghez illeszkedjen.

Nos, most korlátozzuk az első bekezdés magasságát:

Első bekezdés szövege

Második bekezdés szövege

Ennek eredményeként kiderült, hogy a szöveg nem fér bele egy ilyen szűkített bekezdésbe, ezért az alsó szomszéd területére futott be. Ennek megfelelően gyakorlatilag lehetetlen elolvasni a szöveget sem az első, sem a második bekezdésben. Ez a tartalom viselkedésének szabályozása ilyen helyzetekben túlcsordulási szabály:

túlcsordulás: látható|rejtett|görgetés|automatikus|öröklés

Alapértelmezés szerint a túlcsordulás láthatóra van állítva, ami arra utasítja a böngészőt, hogy olyan tartalmat jelenítsen meg, amely nem fér el a tárolóban. Az eredmény a fenti példában látható.

A szabály mindent elrejt, ami nem fér bele a tárolóba:

A görgetési érték függőleges és vízszintes görgetősávokat jelenít meg az elemen, még akkor is, ha az összes tartalom belefér:

Első bekezdés szövege

Második bekezdés szövege

A legnépszerűbb és leglogikusabb megoldás, ha görgetősávokat kell készíteni a tárolóhoz, az érték auto. Ebben az esetben a böngésző maga határozza meg, hogy mikor és mely tengelyeken érdemes görgetősávokat megjeleníteni:

Első bekezdés szövege

Második bekezdés szövege

Eredmény:

A görgetősávok testreszabhatók az overflow-x és overflow-y stílusattribútumokkal is, amelyek lehetővé teszik a görgetés megjelenítésének testreszabását az egyes tengelyeken. Így felelős vízszintes tengely, és számára függőleges tengely.

Ezért, ha például arra van szüksége, hogy a vízszintes görgetés soha ne jelenjen meg egy bekezdésben, és a függőleges görgetés csak szükség esetén, akkor elegendő a következő css szabályt megírni:

p(túlcsordulás-x:rejtett;túlcsordulás-y:automatikus;)

És a probléma megoldódik.

Ez minden. Viszlát. Ne felejtsen el feliratkozni a blogfrissítésekre, és hálás leszek, ha használja a közösségi hálózat gombjait.

Az magasság A CSS tulajdonság egy elem magasságát adja meg. Alapértelmezés szerint a tulajdonság határozza meg a tartalomterület magasságát. Ha azonban a box-sizing a border-box értékre van állítva, akkor ehelyett a szegélyterület magasságát határozza meg.

Ennek az interaktív példának a forrása egy GitHub-tárolóban van tárolva. Ha szeretne hozzájárulni az interaktív példák projekthez, kérjük, klónozza a https://github.com/mdn/interactive-examples oldalt, és küldjön lehívási kérelmet.

A min-height és max-height tulajdonságok felülírják a magasságot.

Szintaxis

/* Kulcsszó érték */ magasság: auto; /* értékek */magasság: 120 képpont; magasság: 10 em; /* Érték */magasság: 75%; /* Globális értékek*/ magasság: örököl; magasság: kezdeti; magasság: nincs beállítva;

értékeket

A CSS adattípus távolságértéket jelöl. A hosszúságok számos CSS-tulajdonságban használhatók, mint például a szélesség, magasság, margó, kitöltés, szegélyszélesség, betűméret és szövegárnyék."> A magasságot abszolút értékként határozza meg. A CSS adattípus százalékos értéket jelent. Gyakran használják a méret meghatározására egy elem szülőobjektumához viszonyítva. Számos tulajdonság használhat százalékos értékeket, mint például a szélesség magassága margó kitöltése és a betűméret.> A magasságot a tartalmazó blokk magasságának százalékában határozza meg. auto A böngésző kiszámítja és kiválasztja a megadott elem magasságát. max-content A belső preferált magasság. min-content A belső minimális magasság. fit-content( CSS adatok type olyan értéket jelent, amely lehet a vagy a ."> ) Az illeszkedés-tartalom képletet használja, ahol a rendelkezésre álló helyet a megadott argumentum helyettesíti, pl. min(max-tartalom, max(min-tartalom,)).

Formális szintaxis

A CSS adattípus százalékos értéket jelent. Gyakran használják a méret meghatározására egy elem szülőobjektumához viszonyítva. Számos tulajdonság használhat százalékos értékeket, mint például a szélesség magassága margó kitöltése és a betűméret.> border-box content-box elérhető min-tartalom max-content fit-content auto

példa

HTML

50 pixel magas vagyok.

25 pixel magas vagyok.

Fele akkora vagyok, mint a szüleim.

css

div ( szélesség: 250 képpont; margó-alsó: 5 képpont; szegély: 2 képpont egyszínű kék; ) #magasabb ( magasság: 50 képpont; ) #rövidebb ( magasság: 25 képpont; ) # szülő ( magasság: 100 képpont; ) #gyermek ( magasság: 50% ;szélesség: 75%;)

eredmény

Hozzáférhetőségi aggályok

Ügyeljen arra, hogy a magassággal beállított elemek ne legyenek csonkolva és/vagy ne takarjanak el más tartalmat, amikor az oldalt nagyítjuk a szöveg méretének növelése érdekében.

Műszaki adatok

Leírás	Állapot	Megjegyzés
CSS belső és külső méretezési modul, 4. szint	Szerkesztői tervezet
CSS belső és külső méretezési modul, 3. szint A „magasság” meghatározása a specifikációban.	Munkatervezet	Hozzáadtuk a max-content , min-content , fit-content kulcsszavakat.
CSS-átmenetek A „magasság” meghatározása a specifikációban.	Munkatervezet	A magasságot animálhatóként sorolja fel.
CSS 2. szint (1. változat) A „magasság” meghatározása a specifikációban.	Ajánlást	Támogatást ad a CSS adattípushoz, amely távolságértéket jelent. A hosszúságok számos CSS-tulajdonságban használhatók, mint például a szélesség, magasság, margó, kitöltés, szegélyszélesség, betűméret és szövegárnyék."> értékeket és pontosítja, hogy melyik elemre vonatkozik.
CSS 1. szint A „magasság” meghatározása a specifikációban.	Ajánlást	kezdeti meghatározás.

kezdő érték	auto
Vonatkozik	minden elem, kivéve a nem lecserélt soron belüli elemeket, táblázatoszlopokat és oszlopcsoportokat
Örökölt	nem
Százalékok	A százalékot a generált dobozt tartalmazó blokk magasságához viszonyítva számítják ki. Ha a tartalmazó blokk magassága nincs kifejezetten megadva (azaz a tartalom magasságától függ), és ez az elem nincs abszolút pozicionálva, az érték kiszámítja to auto .A gyökérelem százalékos magassága a kezdeti tartalmú blokkhoz viszonyítva.
Média	vizuális
Számított érték	százalék vagy automatikus vagy abszolút hossz
Animáció típusa	egy CSS adattípus valós, lebegőpontos számként interpolálódik.">hosszúság , CSS adattípus valós, lebegőpontos számként interpolálódik.">percentage vagy calc();
kanonikus rend	a formális nyelvtan által meghatározott egyedi, nem egyértelmű sorrend

Böngésző kompatibilitás

Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból készült. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.

Frissítse a kompatibilitási adatokat a GitHubon

	Asztali						Mobil
	Króm	él	Firefox	internet böngésző	Opera	szafari	android webview	Chrome Androidra	Firefox Androidra	Opera Androidra	Safari iOS rendszeren	Samsung internet
magasság	Chrome teljes támogatás 1	Edge Teljes támogatás 12	Firefox teljes támogatás 1	IE teljes támogatás 4	Az Opera teljes támogatása 7	A Safari teljes támogatása 1	WebView Android Teljes támogatás 1	Chrome Android Teljes támogatás 18	Firefox Android Teljes támogatás 4	Opera Android Teljes támogatás 10.1	Safari iOS teljes támogatás 1	Samsung Internet Android Teljes támogatás 1.0
illeszkedik a tartalomhoz	Chrome teljes támogatás 46	Edge Nincs támogatás Nem	Firefox Nincs támogatás Nem	IE Nincs támogatás Nem	Opera teljes támogatás 33	Safari Teljes támogatás 11 Teljes támogatás 11 Teljes támogatás 9 Előtaggal Előtaggal				Opera Android?	Safari iOS Teljes támogatás 11 Teljes támogatás 11 Teljes támogatás 9 Előtaggal Előtaggal A szállítói előtaggal megvalósítva: -webkit-
max tartalom	Chrome teljes támogatás 46	Edge Nincs támogatás Nem	Előtaggal Előtaggal	IE Nincs támogatás Nem	Opera teljes támogatás 44	A Safari teljes támogatása 11	WebView Android Teljes támogatás 46	Chrome Android Teljes támogatás 46	Előtaggal Előtaggal A szállítói előtaggal megvalósítva: -moz-			Samsung Internet Android Teljes támogatás 5.0
min tartalom	Chrome teljes támogatás 46	Edge Nincs támogatás Nem	Firefox Teljes támogatás 66 Teljes támogatás 66 Teljes támogatás 3 Előtaggal Előtaggal A szállítói előtaggal megvalósítva: -moz-	IE Nincs támogatás Nem	Opera teljes támogatás 44	A Safari teljes támogatása 11	WebView Android Teljes támogatás 46	Chrome Android Teljes támogatás 46	Firefox Android Teljes támogatás 66 Teljes támogatás 66 Teljes támogatás 4 Előtaggal Előtaggal A szállítói előtaggal megvalósítva: -moz-	Opera Android Teljes támogatás 43	Safari iOS teljes támogatás 11	Samsung Internet Android Teljes támogatás 5.0
nyújtózkodni	Chrome teljes támogatás 28 webkit-fill-available">Alternatív név Teljes támogatás 28 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név	Edge Nincs támogatás Nem	Firefox Nincs támogatás Nem	IE Nincs támogatás Nem	Az Opera teljes támogatása 15 webkit-fill-available">Alternatív név Teljes támogatás 15 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név A nem szabványos nevet használja: -webkit-fill-available	A Safari teljes támogatása 9 webkit-fill-available">Alternatív név Teljes támogatás 9 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név A nem szabványos nevet használja: -webkit-fill-available	WebView Android Teljes támogatás 4.4 webkit-fill-available">Alternatív név Teljes támogatás 4.4 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név A nem szabványos nevet használja: -webkit-fill-available	Chrome Android Teljes támogatás 28 webkit-fill-available">Alternatív név Teljes támogatás 28 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név A nem szabványos nevet használja: -webkit-fill-available	Firefox Android	Opera Android?	Safari iOS teljes támogatás 9 webkit-fill-available">Alternatív név Teljes támogatás 9 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név A nem szabványos nevet használja: -webkit-fill-available	Samsung Internet Android Teljes támogatás 5.0 webkit-fill-available">Alternatív név Teljes támogatás 5.0 webkit-fill-available">Alternatív név webkit-fill-available">Alternatív név A nem szabványos nevet használja: -webkit-fill-available

Legenda

Teljes támogatás Teljes támogatás nincs támogatás nincs támogatás Kompatibilitás ismeretlen Ismeretlen kompatibilitás Nem szabványos nevet használ. Nem szabványos nevet használ. A használathoz szállítói előtag vagy más név szükséges. A használathoz szállítói előtag vagy más név szükséges.