CSS - div nyujtasa

Internet: PHP, CGI, stb.

Udv!

Legyen adott egy mondjuk container nevu div melynek height merete automatikus, tehat igeny szerint lesz majd kiszamolva a magassaga a benne levo tartalom alapjan.
szeretnek 3 masik divet tenni ebbe a container nevube, ugyanazzal a tulajdonsaggal, ami igaz a container divre is. ennek a 3 nap kerete is van.
az a szituacio, hogy pl a 3 divbol az elso a leghosszabb a masodik div tartalma pedig ettol sokkal kevesebb es igy az egesz masodik div is kisebb lesz, azaz vegeredmenyben a ket keretes div magassaga eltero es aljuk, a border nem egy vonalban latszik. Azt szeretnem, hogy ezek egy vonalban legyenek, fuggetlenul attol menny tartalom van egyikben masikban, mindig ugyanolyan magasak legyenek es az pont a legnagyobb doboz merete legyen. Tehat valahogy a kisebbeket meg kene nyujtani igeny szerint.
sajnos a height:100% ezt nem oldja meg.
Van valakinek tippje otlete, netan esetleg meg IQbol meg is mondja hogy kell ilyet csinalni?

koszi,
Zsolt

  • 2430 megtekintés

( zZsOlTi v | 2010. 04. 24., szo – 23:39 )

Rosszul közelíted meg a dolgot. Nem az a lényeg, hogy a 3 div egyforma magas legyen, csak az, hogy úgy nézzen ki, mintha egyforma magasak lennének :)

Ha azt szeretnéd, hogy pl a 3 div alsó bordere egyvonalban legyen, akkor tegyél köréjük mégegy konténer divet és annak adj alsó bordert (vagy ha bonyolultabb a design, akkor pl alulra pozicionált háttérképet).

( arth2o | 2010. 04. 25., v – 20:06 )

Nézz utána a clearfix-nek, clear (clear:both) utasításoknak.

Ha elfogy a türelem jöhet a JS megoldás: Itt.


.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

arth2o: http://keszit.es

js megoldás helyett először a display:table;-el és barátaival (table, inline-table, table-cell, stb) érdemes kísérletezni, ha a clear:both; valami miatt nem jött össze. (az utóbbi az elegáns megoldás, a display:table meg sok esetben az atombiztos.)

Ugye a probléma ott bukik el elős körben, hogy a 3 div-et, amit tartalmaz a container, pl float:left;-re rak, hogy azok egymás mellé kerüljenek (vagy én értettem rosszul!?). ha a container div-en float:none; van, akkor a container magassága 0px lesz,mivel a floatolt div-ek magasságát nem fogja megörökölni.
Hiába, a tableless sitebuildnél vannak buktatók, sokszor teljesen máshogy kell felépíteni mint táblázattal. Jobb lenne tudni, hogy pontosan mit szeretne a kérdező, mert lehet hogy teljesen más módszerrel érdemes megoldani.

de ha már clear:both, akkor : http://weblabor.hu/forumok/temak/16928

Ennek nagyon megorultem, mert jonak tunt eloszor. aztan kiderult hogy megsem jo az esetemben.

A problema ott van, hogy en a border css tulajodnsaggal zarnam le a blokkot. annak a helye a box model szerint kotott, a padding utan. A background pedig tuljulik azon. Innentol kezdve jo hogy a background szinnel ugyanazt az oszlopnagysagot tudom fake-elni, de a border ettol meg kulonbozo szinteken lesz.

kutatok tovabb
zsolt

( Dam | 2010. 04. 25., v – 23:19 )

Üdv!

Szerintem is megfelelő lehet a fenti megoldás számodra!
Ha DIV-ekkel és CSS-sel szeretnél egyforma magasságú oszlopokat kialakítani, nézd meg ezt, ezt, esetleg ezt. Szerintem biztosan találsz megoldást a problémádra!

HAli!

Ne feledd, most kezdődik életed hátralévő része!

( rezso | 2010. 04. 26., h – 19:56 )

min-height nem segít a kisebb div-en?

- rezso -

( bri | 2010. 04. 26., h – 23:36 )

bocs, de ezt nem tudtam kihagyni. ez pontosan az a probléma, amibe mindenki beleütközik 2-4 óra HTML-CSS után.