Viens no izkārtojuma pamatnoteikumiem ir kājenes nospiešana html lapas apakšā neatkarīgi no galvenā satura lieluma. Ir daudz veidu, kā to izdarīt. Šajā tēmā mēs apskatīsim vairākus populārus veidus, kā nospiest kājeni lapas apakšā:

Vispirms izveidosim HTML dokumenta struktūru. Visam pamatteksta taga saturam ir jābūt iesaiņotam kopīgā div (šajā piemērā

). Un ietiniet visu galveno saturu atsevišķā div, neskaitot kājeni (šajā piemērā ).

Kā nospiest kājeni uz lapas apakšdaļu, izmantojot displeju: flex rekvizītu

Šī ir metode, kuru es izmantoju visbiežāk. Tas ir diezgan ātrs, vienkāršs un neprasa kājenes iestatīšanu noteiktā augstumā. Šo īpašumu jau atbalsta lielākā daļa pārlūkprogrammu, tāpēc to var izmantot vairāku pārlūkprogrammu izkārtojumam.

Html, pamatteksts ( augstums: 100%; ) .container ( min-height: 100%; displejs: flex; flex-direction: kolonna; ) .content ( flex: 1; ) kājene ( )

Kā nospiest kājeni lapas apakšā, izmantojot pozicionēšanu

html, pamatteksts ( augstums: 100%; ) .container ( pozīcija: relatīvs; min-augstums: 100%; ) .content ( polsterējums-apakšā: 100 pikseļi; /*polsterējumam jābūt vienādam ar kājenes augstumu*/ ) kājene ( pozīcija: absolūtais platums: 100% /*jāiestata fiksēta augstuma vērtība*/ )

Izmantojot šo metodi, kājenei būs jāiestata fiksēta augstuma vērtība, pretējā gadījumā tā nosegs daļu satura, kas var būt neērti adaptīvajam izkārtojumam.

Nospiežot kājeni līdz lapas apakšai, izmantojot vh vienības

1vh = 1% no loga augstuma. Samazinot loga augstumu, tiek samazināts elementa platums, augstums un fonts. Šīs vienības atbalsta tikai mūsdienu pārlūkprogrammas.

Pirms lietošanas labāk pārbaudīties servisā: https://caniuse.com/#search=calc.

Saturs (min-height: calc(100vh - 100px); /*100vh ir pārlūkprogrammas loga augstums, 100px ir kājenes augstums*/ ) kājene (augstums: 100px; )

Nospiežot kājeni līdz ekrāna apakšdaļai, izveidojot papildu bloku

Šī metode ietver papildu html konstrukcijas izveidi. Būs nepieciešams jauns konteinera div. Ņemiet vērā, ka bloks ar klases atlasītāju saturu iestatīt negatīvu starpība atbilstoši papildu bloka augstumam.

CSS kods šajā gadījumā izskatīsies šādi:

Html, body ( augstums: 100%; ) .container ( min-height: 100%; ) .content ( margin-down: -50px; /*atkāpe, kas vienāda ar papildu bloka augstumu*/ ) .atdalītājs ( augstums: 50 pikseļi ) kājene ( )

Ar cieņu Pavlova Natālija

Nospiediet kājeni līdz ekrāna apakšdaļai. Prasības:

• kājene tiek nospiesta līdz ekrāna apakšai, ja pārlūkprogrammas loga augstums ir lielāks par lapas augstumu neatkarīgi no satura
• kājene atrodas pareizajā vietā, ja satura apjoms ir lielāks par pārlūkprogrammas loga augstumu
• darbojas visās populārajās pārlūkprogrammās
• uzticamība - nav atkarīga no izkārtojuma sarežģītības

Teorija

Laba prakse ir ar vietni aizpildīt visu pieejamo pārlūkprogrammas ekrāna apgabalu (vismaz augstumā, ja dizains ir statisks platumā).

Risinājums

Piemēram, ņemsim vienkāršu lapu, kas sastāv no diviem galvenajiem blokiem: galvenā un kājenes. Pārliecināsimies, ka galvenais bloks aizņem visu pārlūkprogrammas loga laukumu neatkarīgi no satura apjoma, vienlaikus nospiežot kājeni līdz ekrāna apakšai, lai pārlūkprogrammā neparādītos vertikāla ritjosla. Kā mēs to darām:

1. darbība

Izgatavojam 2 blokus: galveno (galveno) un pagrabu (kājene). Mēs izstiepjam galveno konteineru visā pārlūkprogrammas ekrāna augstumā () un stingri norādām kājenes augstumu ().

Šajā gadījumā vietnes kopējais augstums būs ekrāna augstums + kājenes augstums.

2. darbība

Piezīme: Izmantojot bloku izkārtojumu un peldošos galvenos blokus (kolonnas) .hFooter, jāpievieno : abi, lai kājene atrastos zem kolonnām.:

HFooter ( skaidrs: abi; augstums: 40 pikseļi;)

Pārbaudīts:

1. piezīme: Ja esat jau nedaudz apguvis CSS, tad var rasties jautājums: "Kāpēc izmantot papildu elementu, ja varat to izmantot?". Atbilde ir tāda, ka jūs to nevarat vienkārši izmantot šeit, jo... Bloka izmērs ir vienāds ar tā platumu un augstumu + iekšējo polsterējumu summa + apmales biezumu summa. Saite: 100%, un vietnes augstums būs lielāks par ekrāna augstumu. Tā rezultātā, pat ja satura nav vispār, kājene būs ārpus “pirmā ekrāna”. Skatiet tālāk, lai uzzinātu, kā to apiet.

2. piezīme. Opera versijā 9.5 un jaunākā versijā šis piemērs nedarbosies, pievienojot doctype. Risinājuma iespējas:

• pievienojiet vismaz vienu peldošo bloku galvenā konteinera tagam:
  Šis ir galvenais bloks
  Šis ir pagrabs

• pievienojiet divus rekvizītus html, body:

  Html, body (augstums: 100%; peldošs: pa kreisi; platums: 100%; )

• ievietojiet stilus atsevišķā CSS failā:

atjauninājums 8.12.09 — šīs tehnikas trūkums

Tas ir papildu tukša hFooter elementa izmantošana. Reālos apstākļos (kad vietnes saturs nav tukšs un tiek izmantots bloku izkārtojums) no tā var izvairīties, izmantojot - šis piemērs palīdzēs notīrīt plūsmu, neizmantojot papildu elementu un lai saturs neietilpst kājene, mēs to ierakstīsim slejās

atjauninājums 28.12.2009 - problēmas ar z-slāņiem

Iepriekš aprakstītajā tehnikā kājene tika pacelta ar negatīvu atkāpi uz augšu. Tas rada potenciālu problēmu ar z-slāņiem. Piemēram, mums ir jāparāda uznirstošais logs (lai tas būtu div class="popup"), kas tiks novietots attiecībā pret galveno konteineru.

Main ( pozīcija: relatīvā; /* lai bērnu elementi būtu novietoti attiecībā pret šo bloku */ z-index: 1; /* z-index mazāk nekā kājene, lai tas būtu redzams */ ) .popup ( pozīcija: absolūts; [ * lielāks par galveno, lai būtu redzams */)

Viss ir kārtībā, līdz uznirstošais logs un pagrabs krustojas (un šāda situācija notiek diezgan bieži) - šeit sākas problēmas. Neskatoties uz to, ka uznirstošajam logam ir visaugstākais z indekss, to pārklās kājene, jo vecāk uznirstošajam logam ir zemāks z indekss nekā kājenei:

1. variants - meklē iespēju novietot logu nevis attiecībā pret galveno, bet gan pret kādu citu pakārtoto elementu, kas atrodas galvenajā. Tādējādi mēs atbrīvosimies no z indeksa norādīšanas galvenajam un kājenei. Bet šī opcija ne vienmēr ir iespējama, tāpēc apsvērsim otro iespēju nospiest kājeni.

2. risinājums — absolūtā pozicionēšana

Ideja ir līdzīga 1. risinājumam:

1. izstiepiet galveno bloku līdz pilnam ekrāna augstumam
2. rezervēt vietu pagrabam
3. attiecībā pret galveno bloku novietojiet pagrabu pašā apakšā, izmantojot absolūto pozicionēšanu

Html, body ( augstums: 100%; ) .main ( min-height: 100%; pozīcija: relatīvs; /* tā, lai pakārtotie elementi būtu novietoti attiecībā pret šo bloku */ ) .footer ( augstums: 50 pikseļi; pozīcija: absolūtais; pa kreisi: 0 ; apakšā: 0 % e6, kuram ir stienis ar nobīdi 1 pikselis */ )

Šī pieeja atrisinās problēmu ar uznirstošajiem logiem, jo... gan kājenei, gan uznirstošajam logam būs kopīgs vecāks, kas nozīmē, ka ar z-slāņiem nebūs nekādu pārsteigumu.

Katrs maketētājs agrāk vai vēlāk saskaras ar nepieciešamību nospiest vietnes kājeni lapas apakšā. Internetā ir vairāki veidi, kā atrisināt šo problēmu. Es jums parādīšu dažus no tiem, kurus es pats izmantoju praksē.

Vienkāršākais html marķējums:

1. metode

Kājene tiek nospiesta uz leju, pilnībā novietojot to un izstiepjot vecāku bloku (html , pamatteksta un iesaiņojuma) augstumu līdz 100%. Šajā gadījumā satura blokā ir jānorāda apakšējā piemale, kas ir vienāda ar kājenes augstumu vai lielāka par to, pretējā gadījumā pēdēja nosegs daļu satura.

* ( margin: 0; polsterējums: 0; ) html, pamatteksts ( augstums: 100%; ) .wrapper ( pozīcija: relatīvs; min-augstums: 100%; ) .content ( polsterējums-apakšā: 90px; ) .footer ( pozīcija : absolūtais: 0;

2. metode

Kājene tiek nospiesta, pavelkot satura bloku un tā “vecākus” līdz pilnam pārlūkprogrammas loga augstumam un paceļot kājeni uz augšu caur negatīvo piemali (margin-top), lai atbrīvotos no parādītās vertikālās ritināšanas. Šajā gadījumā ir jānorāda pagraba augstums, un tam jābūt vienādam ar ievilkuma apjomu. Pateicoties rekvizītam box-sizing: border-box, mēs neļaujam kastītei ar satura klasi pārsniegt 100% augstumu. Tas ir, šajā gadījumā minimālais augstums: 100% + polsterējums apakšā: 90 pikseļi ir vienāds ar 100% no pārlūkprogrammas loga augstuma.

* ( margin: 0; polsterējums: 0; ) html, body, .wrapper ( augstums: 100%; ) .content ( box-sizing: border-box; min-height: 100%; polsterējums-apakšā: 90px; ) . kājene ( augstums: 80 pikseļi; mala augšdaļa: -80 pikseļi; )

3. metode

Šī metode ir laba, jo atšķirībā no citām metodēm (izņemot 5.) kājenes augstumam nav nozīmes. Šeit mēs atdarinām tabulas darbību, pārvēršot iesaiņojuma bloku par tabulu un satura bloku par tabulas rindu (attiecīgi displejs: tabula un displejs: tabulas rindas rekvizīti). Pateicoties tam, kā arī tam, ka satura blokam un visiem tā vecākkonteineriem ir iestatīts 100% augstums, saturs tiek izstiepts līdz tā pilnam augstumam, atskaitot kājenes augstumu, kas tiek noteikts automātiski - tabulas emulācija neļauj kājenei izstiepties tālāk. pārlūkprogrammas loga augstums.

*( piemale: 0; polsterējums: 0; ) html, pamatteksts ( augstums: 100%; ) .wrapper ( displejs: galds; augstums: 100%; ) .content ( displejs: tabulas rinda; augstums: 100%; )

4. metode

Šī metode nav līdzīga nevienai no iepriekšējām, un tās īpatnība ir CSS funkcijas calc() un mērvienības vh izmantošana, ko atbalsta tikai mūsdienu pārlūkprogrammas. Šeit jums jāzina precīzs kājenes augstums. 100vh ir pārlūkprogrammas loga augstums un 80 pikseļi ir kājenes augstums. Un, izmantojot funkciju calc (), mēs atņemam otro vērtību no pirmās, tādējādi nospiežot kājeni līdz apakšai.

* ( piemale: 0; polsterējums: 0; ) .saturs ( min-augstums: calc(100vh - 80px); )

5. metode

Šī, iespējams, ir labākā metode no visiem piedāvātajiem, taču tā darbojas tikai mūsdienu pārlūkprogrammās. Tāpat kā trešajā metodē, kājenes augstumam nav nozīmes.

* ( margin: 0; polsterējums: 0; ) html, pamatteksts ( augstums: 100%; ) .wrapper ( displejs: flex; flex-direction: kolonna; augstums: 100%; ) .content ( flex: 1 0 auto; ) .footer (flex: 0 0 auto; )

6. metode

Visa bibliotēka dažādiem gadījumiem (izmantojot Flexbox)

Sveiki, dārgie emuāra vietnes lasītāji. Turpinām trīs iepriekšējos rakstos aizsākto un turpināto tēmu par bloku izkārtojumu. Principā jau esam paspējuši izveidot gan divu, gan trīs kolonnu vietnes izkārtojumu, un pat izdevies apsvērt plūstoša izkārtojuma veidošanas nianses.

Turklāt pirmajos rakstos par vietņu izkārtojumu () tika apspriesti daži tīmekļa pārziņa pamatjēdzieni, kuru nesaprotot būtu diezgan grūti saprast nianses.

Kādas problēmas radās ar mūsu vietnes izkārtojumu?

Šodien mēs mēģināsim atrisināt vienu nelielu problēmu, kas var rasties ar iepriekš izveidoto izkārtojumu. Visbiežāk šāda situācija rodas, skatot to lielos monitoros (ar augstu izšķirtspēju) un parādot lapu ar nelielu informācijas apjomu.

Šajā gadījumā var izrādīties, ka kājene netiks piespiesta ekrāna apakšai, bet gan atradīsies gandrīz tā vidējā augstumā, kas vairumā gadījumu izskatīsies neglīti un neestētiski.

Tomēr, manuprāt, kājene ir jānospiež līdz pašai vietnes izkārtojuma apakšai, un tas jo īpaši attiecas uz gadījumiem, kad lapas augstums ir mazāks par lietotāja ekrāna augstumu. Shematiski to var attēlot šādi:

Tie. Pareizā kājenes darbība gadījumā, ja lapā ir neliels informācijas apjoms un liels lietotāja ekrāns, ir šāda:

Lai to īstenotu, mums ir jāveic vairākas manipulācijas ar mūsu izkārtojuma kodu. Turklāt mēs veiksim izmaiņas ne tikai CSS stila failā Style.css, bet arī Index.html, kas satur HTML kodu un veido Div blokus. Bet vispirms vispirms.

Piemēram, mēs izmantosim trīs kolonnu vietnes izkārtojumu, ko izveidojām iepriekš. Šajā gadījumā indekss.html izskatīsies šādi:

Un šādi CSS rekvizīti tika ierakstīti Style.css failā:

Pamatteksts, html ( margin:0px; polsterējums:0px; ) #maket (platums:800px; margin:0 auto; ) #header(fona krāsa:#C0C000; ) #left(fona krāsa:#00C0C0; platums:200px ; peldēšana: pa kreisi (fona krāsa: #FFC0FF; skaidrs: abi; )

Pats izkārtojums izskatījās apmēram šādi:

Kā redzat, kājene nav nospiesta līdz apakšai un tāpēc neatbilst mūsu prasībām (tā vienmēr atrodas zem zemākās kolonnas), tāpēc mums būs jāveic koda korekcijas. To pašu var izdarīt gan divu kolonnu izkārtojumam, gan arī gumijas izkārtojumam. Metode ir universāla.

Kā nospiest kājeni vietnes izkārtojuma apakšdaļā

Tātad, mums ir jāpārvieto Div konteiners ar kājeni uz ekrāna apakšdaļu. Lai to izdarītu, vispirms ir jāiestata visas lapas augstums uz simts procentiem (tas aizņems visu ekrānu). Tas būs nepieciešams, lai pēc tam mainītu galvenā bloka izmēru ar izkārtojumu uz 100%.

Viss vietnes lapas saturs tiek ievietots sākuma un beigu tagos Body, un tāpēc mums ir jāpievieno vēl viens CSS rekvizīts Body tagam Style.css, iestatot augstumu uz 100%.

Pamatteksts, html ( piemale: 0 pikseļi; polsterējums: 0 pikseļi; augstums: 100%; )

Tas pagaidām nekādā veidā neietekmēs izskatu, taču tagad galveno emuāru var izstiept līdz pilnam ekrāna augstumam. Tie. tas bija sava veida sagatavošanās posms.

CSS pamata īpašības, ja vēlaties, varat apskatīt. Tagad iestatīsim konteinera Div, kurā ir viss mūsu izkārtojums, minimālo augstumu 100%:

Es arī gribu to izcelt (div ar id="maket"). Lai to izdarītu, es piešķiršu tam rāmi, izmantojot atbilstošo Border() rekvizītu:

Apmale: viengabalains 3 pikseļu melns rekvizīts ļauj šim konteineram iestatīt viengabalainu apmali (vienmērīgu) 3 pikseļu biezumā melnā krāsā. Tas ļaus jums skaidri redzēt, ka konteiners ar izkārtojumu ir izstiepts visā ekrāna augstumā, pat ja lapā ir neliels informācijas apjoms:

Tagad mums būs jāizņem kājenes bloks no vispārējā konteinera un jānovieto zemāk, tūlīt aiz vispārējā. Ko tas dos? Un tas, ka, visbeidzot, izkārtojuma kājene piekritīs nolaisties uz leju un netiks piespiesta, kā iepriekš, pie tās garākās kolonnas. Šajā gadījumā indekss.html izskatīsies šādi:

Lūdzu, ņemiet vērā, ka bloks ar kājeni vairs neatrodas vispārējā konteinerā (maket), un tāpēc tā platumu vairs neregulē CSS rekvizīti, kas norādīti maket failā Style.css. Kājenes platums izstiepsies visā ekrānā, taču tā joprojām atradīsies ekrāna apakšā, tieši zem galvenā bloka:

Taču atkal rodas problēma, jo, lai redzētu kājeni, tagad pārlūkprogrammā ir jāritina ekrāns (skat. ritjoslu augstāk attēlā).

Tas notiek tāpēc, ka galvenais konteiners (maket) aizņem visu ekrāna augstumu (to nosaka min-height īpašība: 100%), un kājene atrodas tieši aiz tā un lai to apskatītu, būs jāritina, kas nav ļoti ērts un funkcionāls.

Šo problēmu var atrisināt, iestatot negatīvu polsterējumu konteineram Div ar kājeni, lai tas virzītos uz augšu par attālumu, kas vienāds ar tā augstumu. Šajā gadījumā kājenes konteiners pārklāsies ar galveno un ietilps pārlūkprogrammas ekrāna augstumā (t.i., lai to skatītu, jums nebūs jāritina).

Bet, lai iestatītu negatīvu nobīdi no augšas, jums jāzina tieši šis kājenes augstums, taču mēs to vēl nezinām.

Tāpēc vispirms mēs iestatīsim konteinera augstumu, kurā ir kājene, iestatot atbilstošo rekvizītu Style.css:

#footer (fona krāsa: #FFC0FF; skaidrs: abi; augstums: 50 pikseļi; )

Un tad mēs tam iestatām negatīvu rezervi augšpusē līdz augstumam, kas vienāds ar tā augstumu:

Tas ļaus kājenei pacelties precīzi savā augstumā un tādējādi iekļauties pārlūkprogrammas ekrānā (tagad mēs varam noņemt CSS rekvizītu apmali: vienkrāsains 3 pikseļi melns no maket noteikuma, lai apmales biezums netraucētu izkārtojums, ieskaitot kājeni, no ievietošanas ekrāna augstumā):

Kā redzat, tagad ritjosla pārlūkprogrammā neparādās, un viss mūsu trīs kolonnu bloku vietnes izkārtojums ietilpst vienā ekrānā (ja lapā ir maz informācijas), un tajā ir kājene, kas atrodas pašā apakšā. . Tas ir tieši tas, kas mums bija jādara.

Mēs ievietojam starpliku un cīnāmies ar Internet Explorer

Bet rodas problēma, kas parādīsies tikai tad, kad izkārtojuma lapā būs vairāk informācijas un var rasties šāda situācija:

Izrādās, ka var rasties situācija, kad informācija kādā no izkārtojuma kolonnām pārklājas ar kājeni, kas neizskatīsies jauki. Tas notiek bēdīgi slavenā negatīvā polsterējuma dēļ, ko tam uzstādījām un kas palīdzēja pacelt mūsu pagrabu pret galveno izkārtojuma konteineru.

Tie. Izrādās, ka ekrāna apakšā ir divi bloki, kas pārklājas viens ar otru pagraba zonā.

Šīs problēmas risinājums ir pievienot jaunu tukšu Div konteineru (tā saukto starplikas) mūsu izkārtojuma galvenajā konteinerā (maket), vietā, kur iepriekš atradās bloks ar kājeni.

Iestatot šo jauno konteineru augstumā, kas vienāds ar kājenes augstumu, mēs varam izvairīties no informācijas no galvenā konteinera sadursmes ar bloku ar kājeni. Piešķirsim ID () šim konteineram ar nosaukumu Rasporka, un rezultātā mūsu trīs kolonnu izkārtojuma indekss.html izskatīsies šādi:

Un Style.css mēs rakstīsim šim ( , kas nosaka šī starplikas konteinera augstumu vienādu ar pagraba augstumu:

#rasporka ( augstums: 50px; )

Rezultātā kājene no apakšas tiks nospiesta nevis uz informāciju, kas atrodas galvenajā konteinerā (piemēram, tekstam augstākajā kolonnā), bet uz apgabalu, kas vienāds ar kājenes augstumu ar starplikas konteineru, kurā nav informācijas. .

Tādā veidā mēs izvairāmies no sadursmēm un izkropļojumiem mūsu trīs kolonnu izkārtojumā. Viss būs skaidrs un skaists (smalks un cēls):

Kā jau iepriekš minēju, tagad kājenes platums ir jāiestata atsevišķi, jo... šis konteiners vairs nav daļa no galvenā. Lai to izdarītu, CSS failam jāpievieno kājenes papildu rekvizīti, kas ļauj iestatīt tā platumu un izlīdzināt to horizontāli ekrāna vidū.

Ir lietderīgi iestatīt platumu vienādu ar visa izkārtojuma platumu, izmantojot rekvizītu Width, un horizontālo izlīdzināšanu var veikt tādā pašā veidā, kā mēs to darījām visam izkārtojumam bloka izkārtojumā.

Tādējādi mums būs jāpievieno papildu rekvizīti ID kājenei:

#footer (fona krāsa: #FFC0FF; skaidrs: abi; augstums: 20 pikseļi; malas augšdaļa: — 20 pikseļi; platums: 800 pikseļi; piemale-kreisais: automātisks; mala pa labi: automātiski; )

Izmantojot rekvizītu width:800px, platums tiek iestatīts uz 800 pikseļiem, un, izmantojot divus rekvizītus margin-left: auto un margin-right: auto, atkāpes iestatījums kājenes kreisajā un labajā pusē tiek iestatīts automātiski, kā rezultātā kuras šie ievilkumi būs vienādi un mūsu varonis tiks izlīdzināts pa vidu:

Šķiet, ka nekas vairs nav jāuzlabo, taču tas tā nebija. Kā vienmēr, mūsu iecienītākā pārlūkprogramma Internet Explorer 6 kaut ko nesaprot no mūsu izmantotajiem CSS rekvizītiem. Šajā pārlūkprogrammā (un, iespējams, arī dažās citās vecajās), neskatoties uz visiem mūsu pūliņiem, kājene netiks nospiesta līdz apakšai, bet joprojām pieturēsies pie vietnes izkārtojuma augstākās kolonnas.

Tas viss notiek tāpēc, ka ( nesaprot min-height: 100% īpašību, ko izmantojām, lai iestatītu galvenā bloka minimālo augstumu, kas vienāds ar ekrāna augstumu.

Tāpēc, lai atrisinātu šo problēmu, mums būs jāizmanto tā sauktais uzlauzums, kas ļauj vecākām pārlūkprogrammām (uz pirkstiem) izskaidrot, kas jādara. Pirms maket CSS rekvizītu saraksta jums būs jāievieto šāda kombinācija:

* html #maket ( augstums: 100%; )

Šis noteikums tiks piemērots tikai pārlūkprogrammai Internet Explorer 6, citi to neņems vērā un neieviesīs.

Tātad Style.css galīgais izskats, kad kājene ir nospiesta ekrāna apakšā, būs šāds:

Pamatteksts, html ( margin:0px; polsterējums:0px; augstums: 100%; ) * html #maket ( augstums: 100%; ) #maket (platums:800px; margin:0 auto; min-height: 100%; ) # header(fona krāsa:#C0C000; ) #left(fona krāsa:#00C0C0; platums:200px; float:left; ) #right(platums:200px; background-color:#FFFF00; float:right; ) #content (fona krāsa:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; skaidrs:abi; augstums: 50px; margin-top:-50px; platums:800px; margin-left: auto margin-right: auto ) #rasporka ( augstums: 50px; )

Nu, Index.html galīgā forma tika dota tieši iepriekš. Tas ir viss, šo rakstu sēriju, kas veltīta 2 un 3 kolonnu fiksēto un mainīgo vietņu izkārtojumu bloķēšanai, var uzskatīt par pabeigtu.

Varat arī noskatīties video “Darbs ar HTML div tagu”:

Lai tev veicas! Uz drīzu tikšanos emuāra vietnes lapās

Jūs varētu interesēt

Bloku izkārtojums — mēs izveidojam vietnei divu kolonnu, trīs kolonnu un plūstošus izkārtojumus
Divu izkārtojums — izveidojiet blokus divu kolonnu izkārtojumam HTML, nosakiet to izmērus un iestatiet pozicionēšanu CSS.

Vlads Merževičs

Tīmekļa izstrādātāju žargonā runājot, kājene ir vietnes apakšējā daļa, kur tiek rakstītas autortiesības, publicēti kontakti, parādīti dažādi skaitītāji un līdzīga informācija. Parasti kājene atrodas aiz visa satura un ir redzama tikai ritinot lapu. Dažos gadījumos ir vēlams padarīt kājeni vienmēr pieejamu neatkarīgi no lapas augstuma un salabot to pārlūkprogrammas loga apakšā.

Lai to izdarītu, mēs izmantosim pozīcijas rekvizītu un tā vērtību fiksētā . Šajā gadījumā elements paliek vienā vietā, un tā atrašanās vieta tiek norādīta ar koordinātām, izmantojot rekvizītus augšā , pa labi , apakšā , pa kreisi . Mūsu gadījumā pietiek iestatīt kreiso un apakšējo vērtību uz nulli. Fiksēto elementu platums ir vienāds ar to saturu, kas ir skaidri redzams, ja pievienojat fona krāsu vai attēlu, tāpēc arī platums, izmantojot platumu, ir jāiestata 100% (1. piemērs).

1. piemērs: fiksēts pagrabs

Vlads Merževičs

Piemēra rezultāts ir parādīts attēlā. 1.

Rīsi. 1. Kājene lapas apakšā