Kuinka saada sivun alatunniste ("alatunniste") kiinni ikkunan alareunaan - tämä on luultavasti yleisin ongelma sivustosivujen asettelussa. On tietysti ratkaisuja, ja niitä on useita. Alla on yksi tapa varmistaa, että alatunniste painetaan aina sivun alaosaan riippumatta sisällön määrästä ja selaimen tyypistä.
Se on välttämätöntä
Perustiedot CSS: stä ja HTML: stä
Ohjeet
Vaihe 1
Otetaan esimerkkinä yksi tyypillisemmistä sivutusjärjestelmistä - sillä on ullakko (otsikko), päälohko ja alatunniste. Tietenkin, jos tarpeen, voit laittaa useita sarakkeita päälohkoon, mutta emme tee tätä täällä, keskitymme vain siihen, että alatunnistetta ei sijoiteta. Sivun HTML-koodi alkaa määrittelyn ilmoituksella:
Tunnisteiden väliin ja sivun otsikon lisäksi sijoitamme merkinnän koodauksesta sekä linkin ulkoiseen CSS-tiedostoon, joka sisältää tyylien kuvauksen: @import "styles.css"; Emme sijoita Tyylien kuvaus suoraan sivun HTML-koodiin, jotta vältetään yhdeksännen version Opera-selaimen aiheuttamat komplikaatiot. Tunnisteiden väliin ja sijoita sivun lohkorakenne. Ensimmäinen on tietysti otsikkolohko. Annamme sille otsikkotunnuksen, jotta se voi asettaa tyylit tälle lohkolle:
Tämä otsikko on aina ikkunan yläosassa.
Sitten - sivun päälohko. Se koostuu kahdesta sisäkkäisestä - ulkoisesta (tunniste - ulompi) ja sisäisestä (tunniste - ulompi kääre):
Tämä on pääosa.
Ja lopuksi alatunniste:
Se on alatunniste - aina ikkunan alaosassa!
Koko sivu näyttää tältä:
Kuinka painaa alatunnistetta
@import "styles.css";
Tämä otsikko on aina ikkunan yläosassa.
Tämä on pääosa.
Se on alatunniste - aina ikkunan alaosassa!
Vaihe 2
Siirrytään nyt tyylitaulukon sisältöön. Se toteuttaa seuraavan kaavion: pääsivulohko asetetaan 100%: n korkeuteen, otsikko on ehdottomasti sijoitettu ja alatunniste on suhteellisen. Jotta otsikko ei päällekkäisi sivun pääsisällön kanssa, tämä pääsisältö sijoitetaan ylimääräiseen laatikkoon päälaatikon sisällä, ja tämä ylimääräinen ruutu asetetaan ylämarginaaliksi, joka on yhtä suuri kuin otsikkoruudun korkeus. Ja alatunnisteelle annetaan negatiivinen ylämarginaali, joka on yhtä suuri kuin sen korkeus - tällä tavalla se nousee ikkunan alareunan yläpuolelle täydelle korkeudelleen. Css-tiedoston koko sisältö: * {margin: 0; pehmuste: 0}
html, body {korkeus: 100%;} body {
väri musta;
asema: suhteellinen;
}
#outer {
min-korkeus: 100%;
marginaali: 0;
tausta: valkoinen;
väri musta;
} * html #outer {korkeus: 100%;}
#header {
sijainti: absoluuttinen;
yläosa: 0;
vasen: 0;
leveys: 100%;
korkeus: 70px;
tausta: # 304a00;
ylivuoto piilotettu;
väri valkoinen;
tekstin tasaus: keskellä;
} #alatunniste {
asema: suhteellinen;
yläreuna: -50px;
Tyhjennä molemmat;
leveys: 100%;
korkeus: 50px;
taustaväri: # 304a00;
väri valkoinen;
tekstin tasaus: keskellä;
}
.outerwrap {
kellua: vasen;
leveys: 100%;
toppaus: 71px;
} Tämä tiedosto tulisi tallentaa nimellä, jonka määritimme sivun html-koodissa - styles.css.
