Miksi lyhyillä sivuilla, kuten http://jjp.jouluserver.com/ohje.php #everything-div ei veny alas asti
Koska mikään ei pakota sitä pidemmäksi. Ei sillä ei ole syytä kasvaa isommaksi jos sisältö loppuu lyhyeen. Parhaiten saat pituutta lisää määrittämällä #contentille min-heightin. 100%-kikkailut taas... sanoisin ettei ole lopputuloksensa arvoisia.
Miten #contentille voi määrittää min-heightin, jos ei voi laittaa 100%? Ja haluaisin sen täsmälleen ikkunan korkuiseksi, kun sivu on lyhyt.
No, voit määrittää html ja body-elementeille height: 100%; ja sitten pistää body:lle display: table; ja #everythingille display: table-cell; ja hieman hienosäätää muuta CSS:ää näihin muutoksiin (taustavärit sun muut siirtyvät html-elementille body:stä ja body ottaa joitakin #everythingin tyylejä), jolloin toiminnallisuus muuttuu taulukkojen käyttäytymistä imitoivaksi.
Luonnollisesti ei toimi IE6 ja IE7, niitä varten pitäisi joko käyttää oikeita taulukoita tai sitten tehdä huomattavasti monimutkaisempaa kikkailua.
Sitten on tietysti vielä loppujen elementtien sijoittamisongelmat, esim. #content pitää saada näyttämään isommalta, joten pitäisi laittaa position: relative; kait #everythingiin ja sitten sijoitella footteriosa absoluuttisesti ihan #everythingin loppuun, ja lopuksi vielä laittaa tarpeeksi sisennystä #contentin loppuun, ettei #contentin sisältö jää footterin alle. Tai sitten laittaa vielä enemmän taulukkotyylejä ja siten myös lisää elementtejä.
Kyllä tuo min-height on huomattavasti helpompi ja järkevämpi ratkaisu, eikä sivun korkeudella ole niin paljon merkitystä (kovin harva edes huomaa että "ai hei jee, tässä on 100%-kikka!")
Jos teen sen sitten min-heightillä, niin mitä laitan arvoksi?
Juhko kirjoitti:
Jos teen sen sitten min-heightillä, niin mitä laitan arvoksi?
Uskoakseni tällä kertaa ei ole kyseessä mikään Merrin maaginen kikka. :) Laita niin paljon, että lyhytkin sivu alkaa näyttää kivalta, mutta niin vähän, ettei sivu pienelläkään näytöllä mene turhaan alareunasta yli. Tässä tapauksessa pituuden voi hyvin asettaa pikseleinä.
Ei ole maagisia kikkoja tällä kertaa, sillä ne maagiset kikat olisivat joko epämiellyttäviä (taulukkotaittoa taulukkoelementein!) tai hyvin helposti rikottavaa sorttia (varsinkin kun huomioidaan IE6 ja IE7). Ja jos muistan oikein niin aivan liian monimutkaisiakin vielä kaupan päälle.
Jos määritän korkeuden pikseleissä niin, että se näyttää kivalta omalla näytölläni, niin eikös se ole isolla näytöllä sitten liian lyhyt ja pienellä näytöllä liian pitkä
Itse määrittäisin sen vaan niin, että se ei olisi koskaan ihan naurettavan lyhyt ja muuten niin että ei haittaisi vaikka loppuun jäisi taustaa enemmän näkyviin.
Millään keinolla et kuitenkaan voi määrittää sitä niin, että se näkyisi kaikkialla juuri täsmälleen samalla tavalla kuin itselläsi.
Esim. tämä ohjelmointiputka näyttää minusta ihan OK:lta vaikka etusivu loppuukin jo ruudun puolivälissä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.