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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <title>Próba</title>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />  
  6.     </head>  
  7.   
  8.     <body>  
  9.       
  10.         <div style="width: 200px; background-color: red; overflow: auto; padding-bottom: 50px;">  
  11.           
  12.             <div style="background-color:#0066CC; width: 100px; float: left; height: 50px;">  
  13.                 aaaa aaaaaa aaaaa  
  14.             </div>  
  15.               
  16.             <div style="background-color: #00CC66; width: 100px; float: left;">  
  17.                 syfd sf dfs dfdfdf tzutzu tutzutzu tzutzutzutz utzzu tzututzut zu  
  18.             </div>  
  19.               
  20.         </div>  
  21.           
  22.     </body>  
  23. </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.