Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: css height

Cartter [11.05.2010 14:01:49]

#

Terve,

<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <div id="sivu"></div>
  </body>
</html>
html {
    height:100%;
}
body {
    height:100%;
    margin:0;
}
#sivu {
    width:800px;
    height:98%;
    margin:auto;
}

Mitä varten tuo koodi ei keskitä sivua pystysuunnassa?
Firefoxissa sivu jää kiinni selaimen yläreunaan vaikka kaiken järjen mukaan ylhäällä ja alhaalla pitäisi olla 1% tilaa kummassakin.

Mod. lisäsi kooditagit

villev [11.05.2010 14:58:56]

#

Margin: auto toimii vain vaakasuunnassa. Saat #sivun täysin keskelle näin: #sivu {margin: 1% auto;}

Cartter [11.05.2010 16:20:27]

# 

html {
    height:100%;
}
body {
    height:100%;
    margin:0;
}
#sivu {
    height:98%;
    margin:1% auto;
}

Osaatko sanoa, minkä takia tuo css venyttää sivua yli 100%? Sivulle ilmestyy vierityspalkki.

Mod. lisäsi kooditagit

Merri [11.05.2010 18:53:12]

#

Tapa 1:

<!DOCTYPE html>
<html>
	<head>
		<title>Otsikko</title>
		<style type="text/css">

body {
	margin: 0;
	padding: 0;
}

#sivu {
	background: #EEE;
	height: 98%;
	left: 50%;
	margin-left: -400px;
	position: absolute;
	top: 1%;
	width: 800px;
}

		</style>
	</head>
	<body>
		<div id="sivu">Sivu</div>
	</body>
</html>

Tapa 2:

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#sivu {
	background: #EEE;
	height: 98%;
	margin: 0 auto;
	position: relative;
	top: 1%;
	width: 800px;
}

Tapa 3:

html {
	height: 100%;
}

body {
	height: 98%;
	margin: 0;
	padding: .9% 0;
}

#sivu {
	background: #EEE;
	height: 100%;
	margin: 0 auto;
	width: 800px;
}

Viimeisin näistä lähinnä alkuperäistä. Käytän bodyn paddingia, jotta bodystä tulisi (lähes) 100% korkea. Yli 100% menevä yhteiskorkeus johtuu pikselin tarkkuuden pyöristysongelmista, siksi käytin .9%.


Muoks!
Tämä viimeinen on aika epäluotettava kapistus näemmä. Tapa 2 lienee oma suosikkini, sen pitäisi ainakin standarditilan DOCTYPEllä toimia myös IE6:ssa, toisin kuin negatiivisen marginaalin takia riskaabeli ykkönen.

Marginaalin ongelmahan on siinä, että jos se on #sivussa 1% ylälaidassa, niin se siirtääkin myös jopa html-elementtiä sen 1% alaspäin -> vierityspalkki. Tämä johtuu siitä tavasta, jolla marginaalit toimivat.


Tapa 4:

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#sivu {
	background: #EEE;
	height: 98%;
	margin: 0 auto;
	padding: 1% 0 0 0;
	width: 800px;
}

Cartter [11.05.2010 23:05:51]

#

Kaikki ratkaisut vaikuttaa vähän menevän säätämisen puolelle. Saa sitten tuo väkisin venyttäminen jäädä.

Macro [12.05.2010 08:17:04]

#

Eihän se niin vaikeaa ole "säätää", kun Merri antoi neljä toimivaa esimerkkiä.

Merri [12.05.2010 15:18:15]

#

Kokonaan oma asiansa on sitten se, haluatko saada aikaiseksi sen, että 100% on minimikorkeus ja jos sisältöä on enemmän, niin sivu sitten venyisi. Joka tapauksessa tämä on asioita, jotka eivät CSS:llä luonnistu niin sujuvasti. Helpointa on määrittää elementille min-height, jolla saadaan ainakin taattua haluttu vähimmäiskorkeus.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta