ugrás a tartalomhoz

100% magasság befogadó elemhez képest

Blackfire · 2008. Jan. 27. (V), 02.06
Meg lehet valahogy oldani CSS-el, hogy egy div magassága mindig akkora legyen, mint az őt befogadó div magassága, akkor is, ha nem ismerjük a befogadó elem magasságát?
Mert height:100% csak akkor működik, ha a befogadó elemnek megvan határozva egy height érték.
‹ Számozott lista <PRE> IE vs FF ›
 ■
1

Nem.

Fraki · 2008. Jan. 27. (V), 14.31
[strike]Nem.[/strike] De. De miért nem próbálod ki?

IE-ben: *height: expression(parentNode.offsetHeight + 'px');

(CSS-sel)
2

Mit szeretnél elérni?

Jano · 2008. Jan. 27. (V), 14.36
A kérdést inkább úgy tedd fel, hogy mit szeretnél elérni. Van pár trükk amivel bizonyos esetek lekezelhetők.
3

Példa

Blackfire · 2008. Jan. 28. (H), 15.26
Akkor mutatok egy példát:
A text azonosítóju dobozban ismeretlen magasságú tartalom van. Azt szeretném, hogy a box tartalmú doboz mindig olyan magas legyen, mint a másik (másképp fogalmazva, mindig töltse ki teljesen (függőlegesen) a container azonosítójú befogadó dobozt).
HTML:
<div id="container">
  <div id="box">Valami</div>
  <div id="text">
      Bla bla bla <br /><br /><br /><br /><br /><br /><br />
  </div>
  <div style="clear:both"></div>
</div>
CSS:

#container {
  width: 300px; 
  background-color: blue;
}
#box {
  width: 100px; 
  height: 100%; 
  float: left; 
  background-color: red;
}
#text {
  width: 100px; 
  float: right; 
  background-color: black;
}
A Fraki által írt IE hack az segített IE alatt, de mi a megoldás Firefox alatt?
4

weblabor hiba

Blackfire · 2008. Jan. 28. (H), 15.52
[off]
Nahát, a kódszinező mire föl írta oda a float: right sorba kétszer, hogy right? Megnéztem, a szerkesztőmben egyszer szerepel.

Az előző hozzászólásomba is a program tette a helyesírási hibákat? :-)
[on]
5

CSS nincs

Franczen Attila · 2008. Jan. 28. (H), 16.40
Szia,

Tudtommal css megoldás nincs itt. Van persze kerülő, amivel lehet trükközni (min-height), vagy ugye a vizuális összeolvasztás, de ha mindenáron az egyik értékből akarod a másikat számolni, akkor marad a javascript.

Pl.:
<script type="text/javascript">
t = document.getElementById('text').offsetHeight;
document.getElementById('box').style.height=t+'px';
</script>
6

De van.

Fraki · 2008. Jan. 28. (H), 18.03
De van.

#container {  
  width: 300px;   
  background-color: blue;
  position: relative;  
}  
#box {  
  width: 100px;   
  height: 100%;   
  *height: expression(parentNode.offsetHeight + 'px'); 
  background-color: red;
  position: absolute;
}  
#text {  
  width: 100px;   
  float: right;   
  background-color: black;  
}
8

Olvastam

Franczen Attila · 2008. Jan. 29. (K), 15.05
Olvastam már a te megoldásodat fentebb, úgyhogy felesleges ismételned. IE-ben szép és jó, és Mozilla, Opera? Tudtommal ez volt a kérdés második fele.
12

Tekintsd úgy, hogy a megcsillagozott sor nincs ott.

Fraki · 2008. Jan. 29. (K), 18.59
Tekintsd úgy, hogy a megcsillagozott sor nincs ott.
9

Re

Blackfire · 2008. Jan. 29. (K), 15.22
Mint írtam: A Fraki által írt IE hack az segített IE alatt, de mi a megoldás Firefox alatt?

Edit:
Ehhh! Mire gépeltem Janonak egy oldalt, azután vettem észre, hogy a válaszodban nem csak az IE hack szerepel, hanem egy turpisság is, miszerint a container relatív, a box pedig abszolút, és lám ez tényleg elég Firefoxnak is. Azért ezt külön is megemlíthetted volna :-) Köszi.

Viszon abban az esetben nem jó, mikor a box tartalma lesz magasabb, mint a szöveg tartalom, ekkor az abszolút miatt kifolyik a container-ből.
19

height:auto

toxin · 2008. Feb. 2. (Szo), 21.41
Viszon abban az esetben nem jó, mikor a box tartalma lesz magasabb, mint a szöveg tartalom, ekkor az abszolút miatt kifolyik a container-ből.


éppen ezért nem 100%-kell, hanem auto és a top,bottom kinullázása, azaz 

		<style type="text/css">
			#container {  
		       width: 300px;   
		      background-color: blue; 
			  overflow:auto;
			  position:relative; 
		    }  
			
		    #box {  
		      width: 100px; 
			  height:auto;
			  top:0;
			  bottom:0;		     
			  position:absolute;  
		      background-color: red;
			  border-top: 5px solid green;
			  border-bottom: 5px solid green; 
		    }  
		   	#text {  
		     width: 100px;   
		     float: right;   
		     background-color: black;  
		    }  
		</style>
	</head>
	<body>
   <div id="container">  
      <div id="box">Valami</div>  
      <div id="text">  
          Bla bla bla <br /><br /><br /><br /><br /><br /><br />  
      </div>      
   </div>
http://toxin.hu/streches.html , bővebben a Css designpatterns idevágó oldalán

a másik hogy a 

<div style="clear:both"></div>
-on már túllépet a tudomány, konténer elemre: egy overflow:auto;

üdv Csaba

ui: ie6 meg monnyon le :)
20

„éppen ezért nem 100%-kell, hanem auto és a top,bottom...

Fraki · 2008. Feb. 3. (V), 01.53
„éppen ezért nem 100%-kell, hanem auto és a top,bottom kinullázása”

Egyrészt kösz, nem is gondoltam volna, hogy ilyen méretezős logikát csempésztek az abszolútokba (idevágó rész, ha valakit érdekel).

Másrészt ez a problémán nem sokat változtat, a box továbbra sem tolja a konténert. Ez a dolog arról szól, hogy az abszolút elemek szélességét és magasságát kétféleképp lehet állítani: a width/height értékekkel, amelyekre rárakódnak a külső rétegek (top/left/right/bottom, border, margin, padding), valamint a top/bottom és a left/right értékek együttes állításával, amivel a konténerhez képesti offsetszélességet/magasságot lehet kicsalni. Kicsit hasonló trükközés ez, mint (a nem abszolút elemeknél) az auto-marginnal való vízszintes középre állítás.

A clear divekre vonatkozó megjegyzés is hasznos, de nekem kicsit erősnek tűnik, hogy teljesen negligálhatók.
21

fontos az utóirat: ie6-ban nem megy

Jano · 2008. Feb. 3. (V), 11.04
Fontos az ui. ez a méretezési technika ie6-ban nem megy.
22

ie6

toxin · 2008. Feb. 3. (V), 12.40

			#container {  
		      width: 300px;   
		      background-color: blue; 
			  overflow:auto;
			  position:relative;
			  height: 500px;		  	  
		    }  
			
		    #box {  
		      width: 100px; 
			  height:auto;
			  *height : 100%;
			  top:0;
			  bottom:0;		     
			  position:absolute;  
		      background-color: red;			  		  
		    }			
			  
		   	#text {  
		     width: 100px;   
		     float: right;   
		     background-color: black;			 		   
		    }  
		</style>
	</head>
	<body>
   <div id="container">  
      <div id="box">Valami</div>  
      <div id="text">  
          Bla bla bla <br /><br /><br /><br /><br /><br /><br />  
      </div>      
   </div>
igen, ie6-al csak az eredetileg említett megoldásig lehet eljutni, vagy ha a konténer mérete ismert akkor a fenti is müxik

Csaba
-.
ui: nálunk (liligo.fr) előző hónapban ie7 végre leelőzte elődjét, ha jól emlékszem 5%-al
23

Nálunk még nem nagyon, sajnos.

Fraki · 2008. Feb. 3. (V), 17.14
Nálunk még nem nagyon, sajnos. De mindegy, az ie6-ban sokminden más se megy, illetve másképp, szóval ezen nem érdemes rágódni. A lényeg az, hogy (ha jól értettem) mindkét doboznak tudnia kell tolni a konténert, az abszolút elem meg per definitionem nem tud tolni.

A clear divet tényleg kiváltja a konténer overflow:auto (hidden is), de nem értem, miért. Ha valaki erre a referenciában hivatkozást tudna adni, megköszönném. De egyébként a clear div ie6 workaround is, és inkább egy clear div, mint egy css hack.
25

ref

toxin · 2008. Feb. 3. (V), 17.51
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
http://annevankesteren.nl/2005/03/clearing-floats
http://www.456bereastreet.com/archive/200502/simple_clearing_of_floats/


üdv Csaba
26

Úgy értem, a w3c referenciában...

Fraki · 2008. Feb. 3. (V), 21.03
Úgy értem, a w3c referenciában...

A 456-blogon tárgyalják a kérdést, valaki rábukkant:
http://www.456bereastreet.com/archive/200502/simple_clearing_of_floats/#comment5

Bár én nem egészen értem, hogy most itt a 10.6.6 vagy a 10.6.7 utolsó paragrafusa a releváns... na mindegy :o)

Meg ha a specifikáció ezt a lehetőséget kínálja, akkor miért írja a sitepoint szerzője, hogy

„The Markup Method: The first and W3C-recommended approach is a little ugly - extra markup.”
7

Még pontosabban?

Jano · 2008. Jan. 28. (H), 19.30
Még pontosabban? Mi az a valami aminek 100% magasnak kell lennie? Egy oszlopszín?
Ha dizájn eleme akkor adjad meg háttérnek a containernek és a text-et told balmargóval annyival beljebb.
10

Re

Blackfire · 2008. Jan. 29. (K), 16.15
Első sorban általánosan érdekelt, hogy van-e általános megoldás a felvázolt problémára, mert már többször is találkoztam ezzel a munkám során. Erre már kaptam választ.

De beszélhetünk az éppen aktuális, konkrét problémáról is:
Az előbbi példakód az alap (a háttérszínek csak a láthatóság kedvéért szerepeltek a kódban, amúgy most lényegtelenek).

A befogadó konténerünk (container) adja meg az egész hátterét és keretét.
A bal dobozban (box) egy menü van, a jobb dobozban (text) meg az aktuális szöveg. Mind a menü, mind a szöveg változó, nincs fix magasságuk, csak szélességük.

Ez idáig működött, a gond az, hogy a designer egy új elemmel bővítette a dolgot: a befogadó konténer bal alsó sarkához igazítva meg kell jeleníteni egy képet. Ha ezt a képet a container háttérképeként állítanám be, akkor ha a menü magasabb a szövegtartalomnál, akkor a háttérkép a menü alá csúszna.

Az egyik elgondolásom az volt, hogy a képet berakom a container-be, a legvégére. Ezzel az a baj, hogy így a container és a text doboz szélei közt a kép magasságával egyező hézag lesz.

A másik elgondolás az volt, hogy a képet a box-ba teszem a menü után, bottom:0 tulajdonsággal és a box magassága mindig követné a text magasságát (ez lett volna a height:100%). Itt a Jano féle megoldás csak addig jó, amíg a text magasabb, mint a box.
11

Menünek alsó margó vagy padding

Jano · 2008. Jan. 29. (K), 18.57
A containernek adhatod szépen háttérként és a menünek alul beállitasz akkora paddingot vagy margót amekkorát a kép igényel.

Ha nem dizján elem lenne, hanem tartalmi akkor pozicionálással lehetne megoldani (ennek abszolút, containernek meg relative) és ugyanógy menünek alsó padding vagy alsó margó.
13

Alapvetően mindenféle pozicionálás megoldható...

Fraki · 2008. Jan. 29. (K), 19.13
Alapvetően mindenféle pozicionálás megoldható abszolút-relatív elemek játékával, és ezzel nem is szokott gond lenni, amíg dizájnelemekről van szó, mert azok nem nagyon viselkednek, csak vannak.

Amit említettél, hogyha a box tolja a konténert... Ez esetben egy kétoszlopos layoutról van szó, ahol mindkét oszlop tol, egyúttal mindkettő lenyúlik (ha a másik tol). Ezt a viselkedést nem lehet CSS-sel megoldani. Ilyenkor jönnek be olyan technikák, hogy az egyik oszlop hátterét kirakod a konténernek képként stb., de ugye ezeknek megvan a maguk limitációi, amiket meg jellemzően wrapperekkel lehet áthidalni.

Nem értem, a bal alsó sarkos képpel mi a probléma. Teljesen szemantikusan és egyértelműen oldható meg; nem a konténer háttérképeként. A konténerbe kell raknod akárhova, abszolút elemként, bottom-mal és left-tel.
14

Re

Blackfire · 2008. Jan. 30. (Sze), 03.29
Most már valóban logikus, csak teljesen leragadtam a 100% height megoldásnál.
16

Ha kinézeti elem

Jano · 2008. Jan. 30. (Sze), 10.25
Ez az eset pontosan példázza azt, hogy kinézet és tartalomnak elválaszthatónak kell lennie. Grafikus gondol egyet, berak mégegy dizájn elemet és ezért ne kelljen az összes HTML fájlt megborítani. Ha van olyan elemed aminek háttérként tudod adni akkor megoldható az egész CSS-ből.
(Ha ez a kép pl. linkelhető akkor jogos az új HTML elem. Illetve ha már nincs több elemed amit felhasználhatsz akkor persze kénytelen vagy új HTML elemet berakni a CSS korlátai miatt.)
17

Így van, csak annyi megjegyzéseim volnának, hogy az eleve...

Fraki · 2008. Jan. 30. (Sze), 18.23
Így van, csak annyi megjegyzéseim volnának, hogy az eleve baj, hogyha a layout módosítását (HTML) nem csak egy helyen kell elvégezni; valamint ha lehetséges a hátteres megoldás, rendben, de: 1. általában nem lehetséges, mert, mint írtad, a hátterek foglaltak (várjuk a css3-at a rétegezhető hátterekkel), 2. ha a kép vizuális benyomásban nem egyértelműen a konténer háttere, akkor szerintem szemantikusabb div-vel csinálni; elvégre nemcsak szövegdobozokhoz találták ki a position: absolute-ot.

Gyakori dolog, hogy a dizájnnak eltérő, gazdagabb a struktúrája, mint a tartalomnak, ilyenkor jönnek az üres divek amikkel nekem – sokakkal ellentétben – semmi bajom sincs.
18

re

Blackfire · 2008. Jan. 30. (Sze), 21.40
Ez a kép nem design elem volt, egy logo, aminek klikkelhetőnek kellett lennie. Amúgy a htmlben gyakorlatilag csak pár div van, minden más a css fájlban.
Meg egy-két kép, annak ellenére hogy design elem, azért, mert fontos eleme az oldalnak és a fájl neve, alt, title szövege is fontos, pl. SEO szempontból is. De lényegében igyekszek mindent css-be tenni.
15

kész

Blackfire · 2008. Jan. 30. (Sze), 03.35
Köszi a tanácsokat mindenkinek, a menü akkora margót kapott mint a kép és a kép meg abszolút oda lett poziccionálva. Triviális, de több megközelítésből indultam neki és mikor elakadtam az egyiknél, több már nem jutott eszembe.

De megérte, mert arról fogalmam nem volt, hogy a height 100%-hoz abszolút pozicció is kell.
24

100%

ottó7 · 2008. Feb. 3. (V), 17.29
100% magasság magasság elemhez képpest link-> http://www.hackthat.net/df/ddos/17014/index.html :D