Alatunnisteen linkittäminen sivun alaosaan. Kiinteä kellari

Paina alatunnistetta näytön alareunaan. Vaatimukset:

alatunniste painetaan näytön alareunaan, kun selainikkunan korkeus on suurempi kuin sivun korkeus sisällöstä riippumatta
alatunniste on oikealla paikallaan, kun sisällön määrä on suurempi kuin selainikkunan korkeus
toimii kaikissa suosituissa selaimissa
luotettavuus - ei riipu asettelun monimutkaisuudesta

Teoria

On hyvä käytäntö täyttää koko selainnäytön käytettävissä oleva alue sivustolla (vähintään korkeudeltaan staattisen leveän mallin kohdalla).

Ratkaisu

Otetaan esimerkiksi yksinkertainen sivu, joka koostuu kahdesta päälohkosta: pää- ja alatunniste. Varmistetaan, että päälohko vie koko selainikkunan alueen sisällön määrästä riippumatta, samalla kun painat alatunnistetta näytön alareunaan, jotta pystysuora vierityspalkki ei tule näkyviin selaimeen. Kuinka teemme sen:

Vaihe 1

Valmistamme 2 lohkoa: pää (pää) ja kellari (alatunniste). Vedämme pääsäiliön koko selainnäytön korkeuteen () ja määritämme tiukasti alatunnisteen korkeuden ().

Tässä tapauksessa sivuston kokonaiskorkeus on näytön korkeus + alatunnisteen korkeus.

Vaihe 2

Muistilappu: Kun käytät lohkoasettelua ja kelluvia päälohkoja (sarakkeita) .hFooterille, sinun tulee lisätä : molemmat, jotta alatunniste sijaitsee sarakkeiden alla.:

HFooter ( kirkas: molemmat; korkeus: 40 pikseliä; )

Testattu:

Huomautus 1: Jos olet jo hallinnut CSS:n vähän, voi herää kysymys: "Miksi käyttää lisäelementtiä, jos voit käyttää sitä?". Vastaus on, että et voi vain käyttää sitä täällä, koska... Lohkon koko on yhtä suuri kuin sen leveys ja korkeus + sisäisten pehmusteiden summa + reunapaksuuksien summa. Linkki: 100 % ja antaa sivuston korkeudeksi suuremman kuin näytön korkeuden. Tämän seurauksena, vaikka sisältöä ei olisi ollenkaan, alatunniste on "ensimmäisen näytön" ulkopuolella. Katso alta, kuinka voit kiertää tämän.

Muistio 2. Opera-versiossa 9.5 ja uudemmissa tämä esimerkki ei toimi, kun lisätään doctype. Ratkaisuvaihtoehdot:

lisää vähintään yksi kelluva lohko pääsäiliötunnisteeseen:

Tämä on päälohko

Tämä on kellari
lisää kaksi ominaisuutta html:lle, body:
Html,runko (korkeus: 100%; float: vasen; leveys: 100%; )
laita tyylit erilliseen CSS-tiedostoon:

päivitys 8.12.09 - Tämän tekniikan haittapuoli

Tämä on ylimääräisen tyhjän hFooter-elementin käyttö. Todellisissa olosuhteissa (kun sivuston sisältö ei ole tyhjä ja lohkoasettelu on käytössä) tämä voidaan välttää käyttämällä - tämä esimerkki auttaa selkeyttämään kulkua ilman lisäelementtiä ja niin, että sisältö ei mahdu alatunniste, kirjoitamme sen sarakkeisiin

päivitys 28.12.2009 - ongelmia z-kerrosten kanssa

Yllä kuvatussa tekniikassa alatunniste nostettiin negatiivisella sisennyksellä ylöspäin. Tämä aiheuttaa mahdollisen ongelman z-kerroksissa. Meidän on esimerkiksi näytettävä ponnahdusikkuna (olkoon se div class="popup"), joka sijoitetaan suhteessa pääsäiliöön.

[...]

Main ( sijainti: suhteellinen; /* niin, että lapsielementit sijoitetaan suhteessa tähän lohkoon */ z-indeksi: 1; /* z-indeksi pienempi kuin alatunniste, jotta se on näkyvissä */ ) .popup ( sijainti: absoluuttinen; z-indeksi : 100; [...] .footer ( korkeus: 50px; margin-top: -50px; sijainti: suhteellinen; /* jotta voit asettaa z-indeksin */ z-indeksi: 2; / * suurempi kuin pää on näkyvissä */ )

Kaikki on hyvin, kunnes ponnahdusikkuna ja kellari leikkaavat (ja tämä tilanne tapahtuu melko usein) - tästä ongelmat alkavat. Huolimatta siitä, että ponnahdusikkunalla on korkein z-indeksi, se menee päällekkäin alatunnisteen kanssa, koska ylätason ponnahdusikkunan z-indeksi on pienempi kuin alatunnisteessa:

Vaihtoehto 1 - etsi mahdollisuutta sijoittaa ikkuna ei suhteessa pää-, vaan suhteessa johonkin muuhun pääosassa sijaitsevaan alielementtiin. Siten pääsemme eroon pää- ja alatunnisteen z-indeksin määrittämisestä. Mutta tämä vaihtoehto ei ole aina mahdollista, joten harkitsemme toista vaihtoehtoa painaa alatunnistetta.

Ratkaisu 2 - Absoluuttinen paikannus

Idea on samanlainen kuin ratkaisu 1:

venyttää päälohkoa näytön koko korkeudelle
varata tilaa kellariin
suhteessa päälohkoon, aseta kellari aivan pohjaan käyttämällä absoluuttista sijoittelua

[...]

Html, body ( korkeus: 100 %; ) .main ( min-korkeus: 100 %; sijainti: suhteellinen; /* niin, että alielementit sijoitetaan suhteessa tähän lohkoon */ ) .footer ( korkeus: 50px; sijainti: absoluuttinen; vasen: 0 ; leveys: 100% e6:lle, jossa on jamb, jonka poikkeama on 1px */ )

Tämä lähestymistapa ratkaisee ponnahdusikkunoiden ongelman, koska... sekä alatunnisteessa että ponnahdusikkunassa on yhteinen yläosa, mikä tarkoittaa, että z-tasoilla ei tule yllätyksiä.

Opastus

Jokainen, joka on tottunut täysin suunniteltuihin verkkosivustojen sivuihin, pitää parempana sivun alatunnisteen "naulattua" (tahmaa) ilmettä. Mutta Internetissä on kaksi ongelmaa: syöttökentät, jotka eivät kasva alaspäin, ja alatunnisteet, joita ei ole naulattu (ikkunan alareunaan). Kun esimerkiksi avaamme lyhyitä sivuja, huomaa heti, että katseluikkunan alareunaan tarkoitettu tieto tarttuu sisältöön ja sijaitsee jossain keskellä tai jopa yläosassa. ikkuna, kun pohja on tyhjä.

Joten sen sijaan.
Tämä opas aloittelijoille taittosuunnittelijoille näyttää kuinka tehdä "naulattu" alatunniste 45 minuutissa, korjaamalla jopa niin arvostetun julkaisun kuin Habrin puutteet, ja kilpailla sen kanssa lupaavan projektisi toteutuksen laadussa.

Katsotaanpa yhden tyyppisen naulatun alatunnisteen toteutusta, joka on otettu verkosta, ja yritetään ymmärtää, mitä tapahtuu. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap (korkeus: 100%; ) body > #wrap (korkeus: automaattinen; min-korkeus: 100%;) #main (täyttö-ala: 150px; ) /* on oltava samalla korkeudella kuin alatunniste */ #footer ( sijainti: suhteellinen; marginaalin yläosa: -150 pikseliä; /* alatunnisteen korkeuden negatiivinen arvo */ korkeus: 150 kuvapistettä; selkeä: molemmat;) /* TYHJENNÄ KORJAUS* / .clearfix:after (sisältö: "."; näyttö: lohko; korkeus: 0; selkeä: molemmat; näkyvyys: piilotettu;) .clearfix (näyttö: inline-block;) /* Piilottaa IE-macista \*/ * html .clearfix (korkeus: 1%;).clearfix (näyttö: lohko;) /* Lopeta piilotus IE-macista */
HTML:

On epätodennäköistä, että kaikki, jopa ne, jotka tuntevat CSS:n, ymmärtävät tätä koodia katsoessaan periaatteet ja muokkaavat luottavaisesti monimutkaista projektia. Jokainen askel sivulle johtaa sivuvaikutuksiin. Alla olevan keskustelun ja alatunnisteen rakentamisen tarkoituksena on antaa enemmän ymmärrystä CSS:n säännöistä.

Aloitetaan teoriasta

Nailoidun alatunnisteen tavallinen toteutus perustuu ainutlaatuiseen CSS2-ominaisuuteen, jonka elementit ovat välittömiä jälkeläisiä BODY- säilyttää prosentuaalinen korkeus ( korkeus: 100% tai muu) suhteessa ikkunaan, jos kaikilla heidän vanhemmillaan on sama prosenttikorkeus tunnisteesta alkaen HTML. Aiemmin ilman dokumenttityyppejä, mutta nyt Quirks-tilassa elementtien prosenttikorkeuksia tuetaan kaikilla tasoilla, ja nykyaikaisissa dokumenttityypeissä - vain prosenttimääritetyissä elementeissä. Siksi, jos teemme sisältölohkon (kutsutaanko sitä #layout), jonka korkeus on 100 %, se rullaa kuin se olisi ikkuna. Kaikki (suoratoisto) sisältö sijoitetaan siihen paitsi alatunniste ja ehkä otsikko.

Alatunniste sijoitetaan tämän lohkon jälkeen ja sille annetaan 0 pikseliä korkeudeksi. Yleisesti ottaen voit seurata #layout sijoita niin monta lohkoa kuin haluat, mutta niiden kaikkien tulee olla joko 0 pikseliä korkeita tai asiakirjan kulun ulkopuolella (ei asento: staattinen). Ja on toinen tärkeä temppu, jota yleensä käytetään. Korkeudeksi ei tarvitse tehdä 0. Voit tehdä korkeuden kiinteäksi, mutta vähennä se päälohkosta ominaisuuden avulla marginaali-ala: -(korkeus);.

Inhimillisesti sanottuna tyylit luovat alaosaan tyhjän "taskun", johon alatunniste laitetaan, ja se päätyy aina joko juuttumaan ikkunan alareunaan tai dokumentin alareunaan, jos asiakirja on suurempi kuin ikkunan korkeus. Internetissä on monia alatunnistetoteutuksia, vaihtelevalla menestyksellä kaikissa selaimissa. Jatketaan sen rakentamista itse käyttämällä Habrin ulkoasua "työhevosena".

Koska lohkon pohja #layout- tämä on tasku, alatunnisteen tulee olla tyhjä, eikä siinä näy sivuobjekteja. Ja tässä kohtaamme toisen rajoituksen - emme voi luoda tyhjää taskua kustannuksella pehmuste V #layout, koska silloin siitä tulee yli 100 %. Se ei myöskään pelasta sinua marginaali- tyhjyys on luotava käyttämällä sisäkkäisten elementtien ominaisuuksia. Lisäksi on varmistettava, että kelluvat elementit eivät ryömi lohkon reunan alle, minkä tekee esimerkiksi lohko

, Missä .clear(clear:molemmat). On tärkeää, että joko tämä" korkeus" oli kiinteä, joko samoissa suhteellisissa yksiköissä tai laskemme sen sivunvaihtojen yhteydessä. Tämä kohdistuslohko on yleensä kätevää yhdistää halutulle korkeudelle.

Katsotaanpa koehenkilöidemme sivujen rakennetta. Helpoin tapa tehdä tämä on avata Firebug-ikkuna tai vastaava ikkuna (Kehittäjätyökalut (Ctrl-F12)) Chromessa.

...Suosituin mainoslohko...

Jatketaan toimivaan esimerkkiin

Mitkä me näemme? asetteluvirheitä mitä tulee naulatun alatunnisteen vaikutuksen toteuttamiseen? Näemme sen
1) Sivuston alatunniste sijaitsee lohkon sisällä, jossa on id=layout, jolla ei ole prosenttikorkeutta. Teorian mukaan hänen, vanhempien ja sisältölohkon.content-left on asetettava korkeus 100%. Jälkimmäisen kanssa syntyy ongelmia - se ei sovellu tähän. Tämän seurauksena yksi välikerroslohko puuttuu tai alatunniste ei ole oikealla tasolla. Sitä paitsi,
2) Alatunnisteen korkeus on vaihteleva (riippuen luettelon elementtien määrästä ja fontin koosta, tämä ei näy HTML:stä, vaan CSS:stä). JA
3) edellä #layout on mainoslohko, jonka korkeus on kiinteä 90 pikseliä;
4) alatunnisteessa tai (yleisesti sanottuna) lohkossa ei ole kohdistuslohkoja #layout(kyllä, mutta lohkon yläpuolella .rotated_posts; ehkä se kuitenkin pitäisi luokitella alatunnisteeksi).

Kohta 4 - sinun on piirrettävä se käsikirjoituksella.
Vaikuttaa helpolta käsitellä kolmatta kohtaa lisäämällä #layout(margin-top:-90px;) Mutta muista, että tätä lohkoa ei ehkä ole olemassa - se tukahdutetaan bannerin leikkaamisella tai mainostajat päättävät yhtäkkiä olla näyttämättä sitä. Sivustolla on useita sivuja, joilla sitä ei ole. Siksi riippuvuus marginaali yläosa mainoslohkosta on huono idea. On paljon parempi sijoittaa se sisälle #layout- silloin hän ei puutu mihinkään.

Ensimmäinen kohta on, että jotta naulattu alatunniste toimisi ollenkaan, sinun on asetettava alatunnistelohko #layout. Kuitenkin javascriptin avulla voit toteuttaa muita naulattuja alatunnistemalleja, mutta joka tapauksessa tarvitset JS:n tai alun perin oikean asettelun pärjätäksesi ilman sitä.

Koska emme voi olla vahvempia kuin viimeisin sivuston ulkoasun suunnittelija, joka "lyöksyi" alatunnisteen sisällön sisään, jätämme sivuun ajatuksen sijoittaa alatunniste oikein tulevalle verkkosivustollemme (josta on siis "viileämpi"). kuin Habr!), ja käsittelemme Habrin javascriptillä (userscript) oikeaan ehtoon. (Sanotaan vaikka heti, että layout-suunnittelija tai vaihtaja ei ole syyllinen, vaan kohteen tyyppi tietysti ratkaisee projektijohdon strategisen päätöksen.) Näin emme saavuta ihannetta, koska ensimmäinen tai kaksi latausprosessin aikana sivun asettelu on virheellinen. Mutta meille on tärkeää konsepti ja mahdollisuus ylittää laadultaan IT-maailman suosituin verkkosivusto.

Siksi kirjoitamme skriptin oikeaan paikkaan (varhain, sivun latauksen lopussa), mainoksen ja alatunnisteen DOM-lohkojen siirrot oikeisiin paikkoihin. (Varataan siihen, että käyttäjäskriptien takia ratkaisu on monimutkaisempi kuin pelkkä ratkaisu.)
var dQ = function(q)(palauttaa document.querySelector(q);) //lyhennetään var topL = dQ("#topline"), lay = dQ("#layout"), jalka = dQ("#footer" ); if(topL && lay) //banneri - sisältölohkon sisällä lay.insertBefore(topL, lay.firstChild); if(lay && jalka && lay.nextSibling) //alatunnisteen siirtäminen lay.parentNode.insertBefore(footer, lay.nextSibling);
Olemme sijoittaneet lohkot paikoilleen - nyt on jäljellä vain määrittää tarvittavat ominaisuudet elementeille. Alatunnisteen korkeus on asetettava tarkasti, koska tiedämme sen jo käyttäjän komentosarjan ollessa aktiivinen (sivun latauksen lopussa). Kuten yllä mainittiin, käyttäjäskriptin laukaisupisteestä johtuen alatunnisteen näyttäminen sivulla on väistämätöntä. Voit yrittää pukea "hyvät kasvot", mutta "huonolla pelillä"? Minkä vuoksi? Sivuston "huono peli" antaa sinun luoda konseptin ilman ylimääräistä vaivaa, joka riittää arvioimaan laatua ja jota ei tarvita projektisi "oikeaan peliin".
if(jalka)( //block-aligner

alatunnisteessa h.apnd_el((clss:"clear", appendTo: alatunniste)); var jalkaH = jalka.offsetHeight; //...ja mittaa alatunnisteen korkeus ) if(topL && lay && alatunniste && lay.nextSibling)( //tasauslohko vaaditulla korkeudella sisällössä ("layout") h.apnd_el((clss:" clear", css:( korkeus: (jalka ||0) +"px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules("#layout(margin-bottom:- "+ jalkaH +"px !tärkeää)html, runko (korkeus:100 %)"); )
Tässä annoimme itsellemme käyttää itse kirjoitettua funktiota h.apnd_el, joka tekee suunnilleen saman asian kuin jQuery -
$("

").css((korkeus: jalkaH ||0)).appendTo($(alatunniste))
Ja sitten - toinen tyypillinen CSS-sääntöjen täytäntöönpanon toiminto - h.addRules. Et voi tehdä ilman sitä täällä, koska sinun on julistettava sääntö " !tärkeä" - juuri käyttäjän komentosarjan tyylien prioriteettien erityispiirteiden vuoksi.

Näiden koodinpätkien avulla pystymme näkemään naulatun alatunnisteen userscriptissä (alsaan hyppäämisen jälkeen) ja ymmärrämme täysin, kuinka sivun asettelu rakennetaan. Hyppymallin päivittäinen käyttö on epämiellyttävää, joten on suositeltavaa tehdä se vain esittelyä ja testausta varten. HabrAjax-käyttäjäkomentosarjassa asensin samanlaisen skriptin sulkemalla sen "underFooter"-asetuksella (valitse asetusluettelosta ruutu ennen "footer nailed to bottom") alkaen versiosta 0.883_2012-09-12.

Vaikuttaako alatunnisteen naulaus tarpeeseen päivittää ZenComment-tyylejä, jos ne on asennettu? Kyllä. Monimutkaisen tyyliprioriteetin ketjun vuoksi, jossa käyttäjän komentosarjan lisäämät tyylit ovat alhaisimpia, jouduimme hieman säätämään käyttäjätyylejä mahdollisuuksia työskentely naulatulla alatunnisteella. Jos et päivitä käyttäjätyylejäsi (2.66_2012-09-12 +), alatunniste ei toimi oikein.

Lohko rotated_post (kolme suosittua viestiä menneisyydestä) näyttää loogisemmalta alatunnisteen kanssa, joten todellisessa käsikirjoituksessa se myös siirretään alatunnisteeseen.

Toinen kohta (asettelun puutteiden luettelosta) on puhtaasti Habrille tarkoitettu keskustelu (se ei koske käyttäjän komentosarjaa ja toistaa osittain edelliset).

Sivuilla on ongelma, joka estää niitä tekemästä naulattua alatunnistetta käyttämällä puhdasta CSS:ää – määrittelemätön alatunnisteen korkeus selaimen oletuskirjasinkokojen mukaan. Alatunnisteen toteuttamiseksi CSS:n avulla sinun on valittava fonttien suhteelliset korkeudet, mutta ne eivät välttämättä toimi, jos käyttäjän tietokoneessa ei ole vaadittuja fontteja. Siksi ratkaisussa on oltava JavaScript, joka voi säätää alatunnisteen likimääräisen sijainnin täsmälleen siirtymien avulla. Tai kun on tarkasteltu käyttäjäskriptillä tehdyn ratkaisun hyväksyttävyyttä eri alustoilla, tee laskennallinen naulatun alatunnisteen asennus - ensimmäiset havainnot osoittavat, että ratkaisu on käytännöllinen.

Johtopäätös: on mahdollista suunnitella layout kokonaan Habrelle, mutta tätä varten tarvitset taittosuunnittelijan, joka ymmärtää selvästi asettelun käyttäytymisen ja sijoittaa lohkot oikeaan järjestykseen. (Tällä hetkellä alatunniste ja yläbanneri ovat "väärässä paikassa" eikä sillä tavalla, että alatunnisteen voi vain muotoilla naulattuna.) Voit pärjätä ilman JS:ää, jos asetat alatunnisteen korkeuden suhteellisissa yksiköissä. tilaa fonttien epävarmuudelle.

Toteutus

Jos otat HabrAjax 0.883+ käyttöön, näemme "naulatun alatunnisteen" toimivan. Se mukautuu korkeuteen skriptien avulla. Sen avulla voit arvioida, kuinka paljon paremmat sivut, joissa on alatunniste, näyttävät tavallisiin sivuihin verrattuna. ZenComment-käyttäjätyylit ovat yhteensopivia komentosarjojen kanssa, mutta jotta naulattu alatunniste toimisi oikein niiden kanssa, sinun on asennettava ZenCommentin versio 2.66_2012-09-12+.

Faktaa toteutuskäyttäytymisestä

Shamanismi alatunnisteineen, tyyleineen ja käsikirjoituksineen on shamanismia (vain teorian tukema). Käyttäytyminen on hieman erilaista eri selaimissa, mutta joissain paikoissa se on odottamatonta. Ilman käyttäjän komentosarjoja ja uudelleenjärjestelylohkoja tulokset ovat erilaisia. Tämän tuottivat kokeilut käyttäjän komentosarjan toteuttamisesta.

1) Firefox - odottamaton alatunnisteen hyppyjen puute. On outoa, että niitä ei ole - renderöinti tapahtuu sen jälkeen, kun alatunniste on sijoitettu alareunaan.

2) Chrome - se yllätti minut "vaeltavalla rullauksella" - sivulle lisätään tyhjiä tiloja alareunaan jaksolla kerran sekunnissa - jotain vikaa korkeuksien laskennassa. Ratkaisu on kirjoittaa html,body(korkeus:100%) käyttäjän tyyliin, mutta ei ole takeita siitä, että se toimii aina. On luotettavampaa tarkistaa, ettei asiakirja ylitä ikkunan korkeutta, ja jos ei, siirrä alatunnistetta, muuten - ei mitään. Hyppääminen on ok, se on olemassa.

3) Opera - ei hyppyjä (v. 12.02), kun sivu latautuu ensimmäisen kerran, mutta hätäinen uudelleenlataus voi näyttää alatunnisteen hyppyn. Muuten se käyttäytyy yhtä oikein kuin Fx.

No, sinun on erityisesti opetettava Chrome käyttäytymään oikein (skriptin avulla) ja julkaistava versio tässä lomakkeessa näytettäväksi. Siksi käyttäjän komentosarjan osa on hieman monimutkaisempi kuin artikkelissa annettu.

On muistettava, että tämä ei ole täysimittainen toteutus - se ei ota huomioon esimerkiksi tapauksia, joissa käyttäjä muuttaa ikkunan kokoa. Löydät myös harvinaisia (käytännössä) alatunnisteiden korkeuden muuttamisen yhdistelmiä ennen ja jälkeen muuton, jolloin logiikka alkaa epäonnistua aiheuttamatta haittaa. Puutteet jätettiin tarkoituksella, koska parannuksen monimutkaisuuden ja ratkaisun tilapäisyyden välillä säilytettiin tasapaino.

Tuloksena saimme täysin toimivan toimintamallin, ainakin nopeille pöytätietokoneille. Jos alatunnisteen virheellinen toiminta havaitaan, "underFooter" -asetus tulee poistaa käytöstä.

Millä sivuilla tästä on hyötyä?

Vakiosivustolla, ilman käyttäjätyylejä, lyhyetkin kysymys- ja vastaussivut osoittautuvat pidemmiksi kuin 1500 pikseliä, mikä on useimmissa tapauksissa huomaamaton vaakasuuntaisilla näytöillä. Mutta jopa tavallisilla näytöillä törmäät usein henkilökohtaisiin käyttäjäsivuihin, joiden korkeus on noin 1300 pikseliä, joilla liittämätön alatunniste näkyy kaikessa loistossaan. Sivumäärä käyttäjäasetuksissa ei myöskään ole kovin pitkä.

Jos käytät ZenComment-käyttäjätyylejä, ne vähentävät huomattavasti vaadittua sivun korkeutta, ja HabrAjax-käyttäjäkomentosarja ei välttämättä näytä kaikkia tai kaikkia sivupalkin sivulohkoja. Siksi skriptien ja tyylien yhteydessä liittämättömän alatunnisteen vaikutus havaitaan huomattavasti useammin. Siksi on loogista, että alatunnisteen korjaus ilmestyi HabrAjaxissa ensimmäistä kertaa. Mutta tavallisella verkkosivustolla on myös useita sivuja, joilla naulattu alatunniste olisi hyödyllinen.

Tuleeko tukea?

Sivuston käyttäytyminen viimeisen vuoden aikana osoittaa, että kehittäjät (ja siten myös johto) alkoivat ottaa käyttöön ominaisuuksia, jotka aiemmin olivat olemassa vain käyttäjäskripteissä ja käyttäjätyyleissä. Esimerkiksi vuoden alussa kirjoitin, mihin keräsin monia pieniä toiveita. Kuuden kuukauden kuluttua palasin siihen ja huomasin ilokseni (oikein tekstissä; näet "UPD" ja päivämäärät), että useita toiveiksi kuvattuja ominaisuuksia oli jo otettu käyttöön sivustolla.

Katsotaan seuraavaksi "nuolia" neliöiden sijaan arvioitaessa kommentteja. Ne ilmestyivät käyttäjiin ("Prettifier") noin 3 vuotta sitten ja otettiin käyttöön ZenCommentissa noin 2 vuotta sitten. Noin 2-3 kuukautta sitten ne ilmestyivät sivustolle. Alkaa uskoa, että jonkin ajan kuluttua nuolet asettuvat tietyn etäisyyden päähän toisistaan, kuten ZenCommentissa tehdään (yksi nuoli numeron vasemmalla puolella, toinen oikealla), jotta näkee vähemmän.

käyttäjätyylejä

HabrAjax

Lisää tageja

Muistan, että sillä hetkellä, kun aloin siirtymään taulukoista div-asetteluun, yksi kohtaamistani ongelmista oli seuraava - kuinka työntää sivuston alatunniste selainikkunan alaosaan, jolloin sivu näyttää pitkänomaisena täyteen korkeuteensa tekstin määrästä riippumatta, ja jos sivun korkeus on suurempi kuin selainikkunan korkeus (kun vieritys tulee näkyviin), alatunniste jää oikealle paikalleen.

Jos tämä ongelma ratkaistaan taulukoiden avulla vain määrittämällä taulukon ja/tai siihen sisäkkäisen solun korkeus, niin CSS:ää lohkoasettelussa käytetään täysin erilaista lähestymistapaa.

Harjoittelun aikana tunnistin itseni 5 tapaa puristaa alatunniste selainikkunan alaosaan CSS:n avulla.

Kaikkien esitettyjen menetelmien HTML-koodilla on seuraava rakenne (ainoa ero on CSS-koodi):

Alla oleva CSS-koodi sisältää vain ne ominaisuudet, jotka ovat minimaalisesti välttämättömiä vastaavan menetelmän toteuttamiseksi. Jokaisesta heistä voit nähdä elävän esimerkin.

Ensimmäinen tapa

Alatunniste painetaan alas sijoittamalla se ehdottomasti ja venyttämällä ylälohkojen (html , body ja .wrapper) korkeutta 100 %:iin. Tässä tapauksessa sisältö block.content on määritettävä alamarginaali, joka on yhtä suuri tai suurempi kuin alatunnisteen korkeus, muuten alatunniste peittää osan sisällöstä.

* ( marginaali: 0; täyttö: 0; ) html, body ( korkeus: 100 %; ) .wrapper ( sijainti: suhteellinen; min-korkeus: 100 %; ) .content ( täyte-ala: 90px; ) .footer ( sijainti : absoluuttinen: 0;

Toinen tapa

Alatunniste painetaan alas vetämällä sisältölohko ja sen "vanhemmat" selainikkunan täyteen korkeuteen ja nostamalla alatunniste ylös negatiivisen marginaalin (margin-top) läpi, jotta näkyviin tulee pystysuuntainen vieritys. Tässä tapauksessa on ilmoitettava kellarin korkeus, ja sen on oltava yhtä suuri kuin sisennyksen määrä.

* ( marginaali: 0; täyttö: 0; ) html, body, .wrapper (korkeus: 100 %; ) .content ( laatikon koko: border-box; min-korkeus: 100 %; täyte-ala: 90px; ) . alatunniste ( korkeus: 80 kuvapistettä; marginaali yläosa: -80 kuvapistettä; )

Box-sizing: border-box -ominaisuuden ansiosta estämme luokan .content-laatikon ylittämästä 100 % korkeutta. Eli tässä tapauksessa min-korkeus: 100% + täyte-ala: 90px vastaa 100% selainikkunan korkeudesta.

Kolmas tapa

Se on hyvä, koska toisin kuin muut menetelmät (paitsi 5.), alatunnisteen korkeudella ei ole väliä.

* ( marginaali: 0; täyte: 0; ) html, body ( korkeus: 100 %; ) .wrapper ( näyttö: pöytä; korkeus: 100 %; ) .sisältö ( näyttö: taulukko-rivi; korkeus: 100 %; )

Tässä emuloimme taulukon käyttäytymistä muuttamalla .wrapper-lohkon taulukoksi ja .content-lohkon taulukon riviksi (näyttö: taulukko ja näyttö: taulukko-riviominaisuudet). Tämän ja sen ansiosta, että .content-lohko ja kaikki sen pääsäilöt on asetettu 100 %:n korkeuteen, sisältö venytetään täyteen korkeuteen, josta on vähennetty alatunnisteen korkeus, joka määritetään automaattisesti - taulukon emulointi estää alatunnistetta laajenemasta selainikkunan korkeuden yli.

Tämän seurauksena alatunniste painuu pohjaan.

Neljäs menetelmä

Tämä menetelmä poikkeaa aiemmista, ja sen erityispiirteenä on CSS-funktion calc() ja vh-mittayksikön käyttö, joita vain nykyaikaiset selaimet tukevat. Täällä sinun on tiedettävä kellarin tarkka korkeus.

* ( marginaali: 0; täyte: 0; ) .content ( min-korkeus: calc(100vh - 80px); )

100vh on selainikkunan korkeus ja 80px on alatunnisteen korkeus. Ja käyttämällä calc()-funktiota vähennämme toisen arvon ensimmäisestä, jolloin alatunniste painetaan alas.

02.05.15 21,5 tk

Tämä on jonkinlainen painajainen! Miksi sivustosi alatunniste "ponnahtaa" uudelleen esiin ja muuttaa ulkoasua? Onko todella mahdotonta painaa alatunnistetta kunnolla sivun alareunaan jollakin? Sisältö tai ainakin tiilet! Eikö tiili mahdu näyttöön?

Näen, istu sitten äläkä tee mitään, ennen kuin olet lukenut artikkelimme loppuun.

Oikean alatunnisteen tekeminen verkkosivustollesi

Monet verkkosivustojen omistajat kohtaavat tämän ongelman, kun sivun alatunniste yksinkertaisesti kelluu yläreunaan. Ja sitten ei ole selvää, mitä tehdä. Useimmiten kiireessä, itse kootut verkkosivusuunnittelut kärsivät tästä haitasta ( ympyrä "hullut kädet") tai aloitteleville verkkovastaaville.

Samaan aikaan sivuston alkuvaiheessa ei tapahdu mitään kauheaa. Ja tämä idylli jatkuu niin kauan kuin sisältö painaa "painonsa" kellariin estäen sitä nousemasta. Mutta sivulle kannattaa sijoittaa pienempiä määriä materiaalia, ja äskettäin "rauhallinen" alatunniste nousee heti yläosaan tuoden koko sivuston suunnittelun sopimattomaan ulkonäköön.

Tämän suunnitellun mallin "vian" poistamiseksi ei tarvitse kuluttaa rahaa verkkovastaavan palveluihin. Useimmiten sivuston alatunniste voidaan asettaa paikoilleen itse. Harkitse kaikkia mahdollisia vaihtoehtoja tämän ongelman poistamiseksi:

Ensimmäinen tapa

Ensimmäinen tapa ankkuroida alatunniste sivun alaosaan perustuu CSS:ään. Aloitetaan esimerkkikoodilla ja katsotaan sitten tarkemmin sen toteutusta:

html ( korkeus: 100 %; ) header, nav, section, article, side, alatunniste ( näyttö: block; ) body ( korkeus: 100 %; ) #wrapper ( leveys: 1000px; margin: 0 auto; min-korkeus: 100 %; korkeus: automaattinen !korkeus: 100% ; ) #footer (leveys: 1000px; marginaali: -100px auto 0; korkeus: 100px; sijainti: suhteellinen; taustaväri: rgb(51,51,204); )