Mulla on ensiks valikko X pikseliä yläreunasta ja se on Y pikseliä korkee. Sen alla on div id:llä sisalto. #sisalto:n pitäisi olla 100% korkea, mutta kun sille määrittää 100% korkeuden nii se menee yli alareunan. Miten sen saisi venymään alareunaan, ja jos sisältö on pidempoi kuin mitä siihen mahtuu, niin se ois tarpeeks pitkä.
Eiks tääl kukkaan tiedä??
Ihmiset eivät ole vielä tulleet töistä, Rocceri.
Mutta siis jos sun eka elementti on vaikka 10 pikseliä yläreunasta ja se on vaikka 40 pikseliä korkea, niin silloin elementti on todellakin 50 pikseliö ruudun yläreunasta. Sisältö alkaa siis 50 pikseliä yläreunasta ja on siis 100 % korkea. Mun näytöllä siis 768 pikseliä. Sisältö menee siis 50 pikseliä näytön alareunan alapuolelle. Tarvinnet min-height asetusta tuolle sisällölle.
Eikö siihen muka sitten oo muita keinoja? Javascriptillä tietty pystyis ottaan korkeuden, miinustamaan sen alkukohan korkeuden ja sitten asettamaan sisällölle min korkeuden.
Mutta kun css tarjoaa jo tuolle javascriptille vaihtoehdon. Ei sillä että se väärin olisi, mutta javascriptiä ei ehkä ihan tuohon kuitenkaan kannata käyttää.
En mä vaan saa sitä tolla tyylillä. Minimissään sivun alareunaan, ja jos on enemmän sisältöä, niin scrollbar.
Laita tuonne sisältöön vaikka lorem ipsumia, niin näet että toimii.
<!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" xml:lang="fi" lang="fi">
<head>
<title>Min height</title>
<style type="text/css">
#logo{
position: absolute;
top: 5%;
height: 7%;
width: 99%;
border: 1px solid green;
}
#sisalto{
position: absolute;
top: 12.5%;
min-height: 87.2%;
width: 80%;
left: 15%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="logo">
<ul>
<li>linkki1</li>
</ul>
</div>
<div id="sisalto">
<p></p>
</div>
</body>
</html>Eli sisältödiv on ainakin sivun alareunaan, mutta voi olla isompikin. Testattu firefox 3.x sarjan selaimella.
No tollee se onnistuu, jos korkeudet on prosentteina. Mutta kun sen pitäisi olla ilmoitettu pikseleinä. Muutenhan se ei toimi. Sisältöalueen pitää alkaa 45px yläreunasta.
Eikö kukaan tiedä, että miten sen saa toimimaan pikseliarvoilla??
Väittäisin, ettei saa, jos jollain on parempaa tietoa, kuulisin mielelläni. Joka tapauksessa fiksuin ratkaisu on unohtaa se 100% korkeus ja kaikki toimii heti.
Laita molemmat divit yhden ison divin sisään ja tämän ison divin padding-top 45px ja height 100%.
rocceri: Ei ole mahdollista, jos ikkunan korkeus ei ole tiedossa, joten jotakin selaimessa suoritettavaa koodia tarvitaan tähän. Pikselitaitto on (myös) tämän takia huono ratkaisu. awlyn ratkaisu ei toimi ainakaan omassa selaimessani.
Minä ratkaisin sen Teuron aijemmin postaaman koodin pohjalta koodin, joka toimii näin:
<html>
<head>
<title>Min height</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#logo{
position: absolute;
height: 45px;
width: 100%;
background-color: green;
}
#sisalto{
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id="sisalto">
<p></p>
</div>
<div id="logo">
Yläosa
</div>
</body>
</html>#sisalto pitää määrittää sen takia ensiksi, koska se on 100% korkea, ja jos se olisi alapuolella, se peittäisi #logon. Lyhyemmin: #sisalto on alla 100% korkea, ja #logo päällä.
Nyt vaan sisältö ei ole aseteltu oikein. Lisäksi mikä tuossa koodissa takaa sen, että sisältö alkaa todella 45 pikseliä yläreunasta? Minä luulen, että tuo alkaa otsikon kanssa yhtä aikaa.
Pittäkkee kivvaa.
http://merri.net/xhtml/
<!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" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>100% korkeus [display table]</title>
<style type="text/css">/*<![CDATA[*/
html {
height: 100%;
}
body {
display: table;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#valikko {
background: #EEE;
height: 45px;
position: absolute;
top: 0;
width: 100%;
}
#sisalto {
background: #DDD;
display: table-cell;
padding-top: 45px;
}
#piilo {
background: red;
display: none;
height: 2000px;
width: 200px;
}
/*]]>*/</style>
</head>
<body>
<div id="valikko">
Valival
</div>
<div id="sisalto">
<h2>Sisäsil</h2>
<p>Ei toimi IE7. Toimii kaikissa muissa.</p>
<p><button onclick="var piilo=document.getElementById('piilo');if(this.p) { piilo.style.display='none'; this.p = 0; } else { piilo.style.display='block'; this.p = 1; }">Paina</button></p>
<div id="piilo">Piilossa</div>
</div>
</body>
</html>http://merri.net/xhtml/
<!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" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>100% korkeus [extra elementti]</title>
<style type="text/css">/*<![CDATA[*/
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#dokumentti {
background: #DDD;
min-height: 100%;
position: relative;
width: 100%;
}
#valikko {
background: #EEE;
height: 45px;
position: absolute;
top: 0;
width: 100%;
}
#sisalto {
padding-top: 45px;
}
#piilo {
background: red;
display: none;
height: 2000px;
width: 200px;
}
/*]]>*/</style>
</head>
<body>
<div id="dokumentti">
<div id="valikko">
Valival
</div>
<div id="sisalto">
<h2>Sisäsil</h2>
<p>Ei toimi IE6. Toimii kaikissa muissa.</p>
<p><button onclick="var piilo=document.getElementById('piilo');if(this.p) { piilo.style.display='none'; this.p = 0; } else { piilo.style.display='block'; this.p = 1; }">Paina</button></p>
<div id="piilo">Piilossa</div>
</div>
</div>
</body>
</html>Nähtävästi koodistani unohtui lohko, joka määrittää sisältöalueen tekstin alkavan vasta 45px yläreunasta
Jos tarkoitus olisi, että #sisalto olisi "vähintään 100% - 45px niin että taustavärin ja -kuvan on pakko olla #sisallossa", niin hankalaksi menee. Jos sen pitäisi olla vielä IE7- tai IE6-yhteensopiva, niin menee extrahankalaksi. 100% korkeusjutut on pääosin aina aika huuhaata: ei sillä useinkaan oikeasti tee mitään, käyttäjät ei sitä huomaa, yleensä "feikkaamalla" järkevällä elementtien sijoittelulla ja läpinäkyvyyksin saa halutun lopputuloksen ilman kovinkaan vaikeita kikkailuja.
min-height on varsin pätevä asettamaan passelin minimikorkeuden elementille, jos elementti näyttää esim. vajaalla sisällöllä tietyillä sivuilla typerältä. Vaihtoehto B on miettiä sisältö siten, ettei tule typeriä superlyhyitä sivuja.
Aihe on jo aika vanha, joten et voi enää vastata siihen.