Käytin tuota ideaa sivupohjaan. Tuossa siis luodaan sivu, jossa footer on sivun tai selainikkunan alareunassa riippuen siitä, kumpi noista on alempana. Kätevä kikka, jolla saadaan vähäsisältöinen sivu näyttämään fiksummalta. (En haluaisi sivun korkeutta määritellä staattisesti - tai en ole ainakaan vielä antautunut :)
Tarkoitus oli lisätä #containerin ympärille vielä toinen wrapper. En vaan saa toista wrapperia millään venymään #containerin korkuiseksi.
Alla olevassa esimerkissä html&body on oranssi. Tuo toinen wrapper on tummempi harmaa ja container on rajattu mustilla bordereilla. Esimerkki toimii - osittain: jos sivulla on sisältöä niin paljon, että pystysyyntainen scrollbar tarvitaan, tummempi harmaa eli wrapper katkeaa ensimmäisen "näytöllisen" jälkeen. Kokeilin ties mitä, mutta en keksinyt ratkaisua, joka toimisi FF3.6:ssa.
Ongelman saa esiin, kun esimerkin avaa selaimeen ja pienentää selainikkunaa niin paljon, että scrollbar-tarvitaan (tai heittää lorem ipsumia #bodyyn).
Kokeilin ties mitä, mutta ei vaan tepsi. Toinen ratkaisuyritelmä oli määritellä #wrapperille position: relative ja #containerille position: fixed. Vielä kun laittoi min-height: 100% molemmille, layout toimii muuten kivasti mutta FF ei näytä scrollbaria missään tilanteessa.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template test</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
background-color: orange;
}
#wrapper {
background-color: gray;
width: 820px;
margin: 0 auto;
height: 100%;
}
#container {
min-height:100%;
width: 800px;
margin: 0 auto;
position:relative;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: silver;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
background-color: white;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">Header</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>Edit: Väärä versio koodista.
Tässä nyt jotain nopeaa muuntelua, joka tosin ei toimi IE6:lla eikä IE7:llä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template test</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
background-color: orange;
}
body {
height: 100%;
padding: 0 10px;
margin: 0 auto;
width: 820px;
}
#container {
display: table;
border: 10px solid gray;
border-width: 0 10px;
margin: 0 auto;
height: 100%;
position: relative;
width: 802px;
}
#container > div {
display: table-row;
}
#container > div:first-child + div {
height: 100%;
}
#header,#body,#footer {
border-left: 1px solid black;
border-right: 1px solid black;
}
#header {
background:#ff0;
display: table-cell;
margin: 0;
padding:10px;
}
#body {
display: table-cell;
padding:10px;
background-color: white;
}
#footer {
display: table-cell;
height:60px; /* Height of the footer */
background:#6cf;
margin: 0;
}
p:hover {
height: 1000px;
}
</style>
</head>
<body>
<div id="container">
<div><h1 id="header">Header</h1></div>
<div><div id="body">Body<p>Testi</p></div></div>
<div><p id="footer">Footer</p></div>
</div>
</body>
</html>IE6:n ja IE7:n saa sillä, että käyttää table-tageja. Toisaalta leiskasi saa toimimaan visuaalisesti halutulla tavalla käyttämällä bodyssä keskitettyä toistuvaa taustakuvaa. On varsin usein helpompaa, mitä vähemmän sisäkkäisiä elementtejä joutuu käyttämään. Omassa koodissasi valtaosan ongelmista aiheuttaa se, ettet saa min-heightiä molempiin elementteihin: #wrapperissa on pakko olla position-relative, ja toisaalta #container ei saa minkäänlaista korkeustietoa prosenttien toteuttamiseksi, jolloin elementti on aina niin pieni kuin mahdollista.
Sitten on vielä tämä asia:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Tämän tulisi olla ensimmäinen tagi headin sisällä, koska sen on parasta tulla tarjoilluksi ensimmäisten tavujen joukossa. Näin haluttu merkistöasetus tulee mahdollimman aikaisin käyttöön. Jotkut selaimet myös jättävät sen huomiotta, mikäli se ei ole ensimmäisen luetun paketin tai tietyn tavumäärän sisällä.
Merri kirjoitti:
Toisaalta leiskasi saa toimimaan visuaalisesti halutulla tavalla käyttämällä bodyssä keskitettyä toistuvaa taustakuvaa.
Joskus sitä on niin hirmuisen vaikea päästä laatikosta ulos.. Yleensä se auttaa. Kiitos.
Mihin me putkalaiset jouduttaisiinkaan CSS:n kanssa ilman Merriä? :-)
lainaus:
On varsin usein helpompaa, mitä vähemmän sisäkkäisiä elementtejä joutuu käyttämään.
Niin, itse asiassa se mitä olin tekemässä, oli border. Valitettavasti vain ei onnistu CSS:llä pelkästään inner & outer -borderien määrittelyt :-/
lainaus:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />Tämän tulisi olla ensimmäinen tagi headin sisällä, koska sen on parasta tulla tarjoilluksi ensimmäisten tavujen joukossa. Näin haluttu merkistöasetus tulee mahdollimman aikaisin käyttöön. Jotkut selaimet myös jättävät sen huomiotta, mikäli se ei ole ensimmäisen luetun paketin tai tietyn tavumäärän sisällä.
Hmmm.. vaikuttaako tuon puuttuminen, jos sama tieto menee oikeissa HTTP-headereissa? Toki suoraan tiedostosta avattuna HTTP-headereita ei ole.
Sinänsä merkistön määrittäminen itse tiedostossa olisi tärkeää, esimerkiksi juuri silloin kun tiedostoa ei tarjoilla palvelimelta vaan se on ihan vaikka Windows-koneella tallennettuna – tällöin tiedosto voi näkyä väärin kun sen avaa, mikäli metatagia ei löydy. IE6:n takia joutuu XHTML-tiedostoihinkin määrittämään merkistön metatagina, koska merkistön määrittävää XML-prologi heittää pois standarditilasta; asia on korjattu IE7:ssä, mutta IE6:n kirous päästelee vielä viimeisiä huutojaan ehkä pari-kolmekin vuotta, kunnes XP:n tuki loppuu 2014.
Muutenhan XHTML:n oletusmerkistö pitäisi käsittääkseni aina olla UTF-8 XML-pohjaisuuden vuoksi.
Merri kirjoitti:
... kunnes XP:n tuki loppuu 2014.
Eikös tuota ole taas pidennetty vuoteen 2020? Vai oliko kyse tuesta vain yrityksille? En muista lähdettä.
reca kirjoitti:
Eikös tuota ole taas pidennetty vuoteen 2020?
Ainakaan Microsoft ei tunnu tietävän asiasta mitään: http://support.microsoft.com/lifecycle/?LN=en-us&C2=1173&x=5&y=16
reca kirjoitti:
Merri kirjoitti:
... kunnes XP:n tuki loppuu 2014.
Eikös tuota ole taas pidennetty vuoteen 2020? Vai oliko kyse tuesta vain yrityksille? En muista lähdettä.
2020 asti on pidennetty vain ja ainoastaan XP downgrade oikeutta Windows seiskasta.
http://www.neowin.net/news/microsoft-extends-windows-xp-downgrade-rights-until-2020
Aihe on jo aika vanha, joten et voi enää vastata siihen.