ugrás a tartalomhoz

Változó magasságú divben a div aljára pozícionolás

Anonymous · 2006. Május. 4. (Cs), 12.01
Hali.

A kérdésem az lenne, hogy milyen módon lehet egy előre nem ismert magasságú divben a div aljára helyezni a tartalmat?
‹ Blog bejegyzések listájának szemantikája Kinyíló menüm nem megy a Bambina weboldalon ›
 ■
1

Pozicionálás

Jano · 2006. Május. 4. (Cs), 13.16
Ha a behelyezendő elem fix magasságú akkor egyszerű:

A külső elemnek megadod alsó padding méretnek a belső elem magasságát, így kimarad annyi hely a tartalom alatt amennyi az alsó doboznak kelleni fog.

Ezután a külső doboznak relative pozicionálast állitasz be a lentre teendő elemnek pedig absolute.

Végül a lentre teendő elemnek a bottom tulajdonsága legyen 0.
2

Pontosítok...

Anonymous · 2006. Május. 4. (Cs), 16.14
Megpróbáltam amit írtál, de már az elején gondom van ("A külső elemnek megadod alsó padding méretnek a belső elem magasságát").

A kód: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Próba</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	</head>

	<body>
	
		<div style="width: 200px; background-color: red; overflow: auto; padding-bottom: 50px;">
		
			<div style="background-color:#0066CC; width: 100px; float: left; height: 50px;">
				aaaa aaaaaa aaaaa
			</div>
			
			<div style="background-color: #00CC66; width: 100px; float: left;">
				syfd sf dfs dfdfdf tzutzu tutzutzu tzutzutzutz utzzu tzututzut zu
			</div>
			
		</div>
		
	</body>
</html>
Tehát mint látható ez egy két oszlopos elrendezés lenne. Van egy háttér (piros) és két oszlop. A magasságot a jobb oldali oszlop adja, a bal oldalinak mindig alul kéne lennie. Ez az amit nem tudok megoldani divekkel (ha nem tudom, hogy a piros és a kék magassága mekkora).
Amit írtál azért nem jó, mert a padding hatására a piros lefele nyúlik és az úgy nem jó.
3

float

erenon · 2006. Május. 4. (Cs), 16.17
a két felső float:left; , az alsó pedig clear:both
Van rengeteg leírás itt is.
4

így

Anonymous · 2006. Május. 4. (Cs), 16.20
<div id="foo">
<div id="bar">...tartalom...</div>
</div>

--

div#foo {
position: relative
}

div#bar {
position: absolute;
bottom: 0;
}
5

ha jol ertem

Jano · 2006. Május. 4. (Cs), 17.27
Ha jol ertem amit akarsz, vagyis az egyik oszlopnak a masik labanal kell hogy vege legyen akarmekkora is legyen az, de azt lehet tudni, hogy mindig az a nagyobb, akkor:

Ne floatolj semmit.
A piros hatteru oszlopnak ad meg a relative pozicionalast, a lentre es oldalra illszekedeshez pedig a belso elemnek az abszolut pozicionalast es bottom:0 es right:0 (vagy left:0) parametereket.