Ytre div blir mindre enn indre

[dabear]

Heisann. Jeg har følgende struktur, hvor "dialog" blir en container, og hvor "dialogContents" vil ha sideinnholdet. Problemet er at ramma på "dialog" ikke strekker seg rundt hele innholdet som kommer i "dialogContents". Hva har jeg gjort galt?

 

Ytre div har jeg nå satt til svart ramme, mens den indre har lilla ramme, bare for demonstrasjonsskyld..

 

<div id="dialog">
  <!-- thanks to oxygen icons! http://www.oxygen-icons.org/ -->
  <img id="closeButton" src="window_close.png" width="22" height="22"></img>
  <div id="dialogContents">
	innhold her
  </div>

</div>

 

Side kan testes her, trykk knappen "cv":

http://stud.aitel.hist.no/~biberg/bjorninge.no/

 

(eller gå til http://stud.aitel.hist.no/~biberg/bjorninge.no/#cv direkte)

Endret 12. juli 2009 av dabear

[4588pkdkrikue5c]

Det er då berre å skrive height:auto i CSS'en på "Dialog" hos meg iallefall.

Redigert: Det du hadde sett til 500px, skriv auto der.

Endret 12. juli 2009 av steffenz

[dabear]

ah, det var så enkelt ja, takker. Hvordan får jeg nå en minimumshøyde som strekker seg ned hele vinduet da? jeg har forstått det slik at ie6 ikke støtter min-height.

Endret 12. juli 2009 av dabear

[4588pkdkrikue5c]

Stemmer det, men det er ikkje så utruleg vanskeleg å fikse, berre gjer slik (syns å hugse dette fungerer, men har berre Mac å teste på no, altså ingen IE6).

 

min-height:500px; 
height:auto !important;
height:500px;

 

Talet 500 kan du naturlegvis endre. Lukke til.

[dabear]

Hei, takk for svar. Denne løsninga ser bare ut til å fungere med absolutte tall. Jeg ønsker jo at den skal strekke seg minimum helt ned sida, og enda lengre om innholdet krever det selvsagt.

 

Når jeg bruker følgende kode, så vil jo ikke http://stud.aitel.hist.no/~biberg/bjorninge.no/#kontakt strekke seg helt ned, fordi den ikke har nok innhold:

		min-height:100%; 
	height:auto !important;
	height:100%;

Endret 12. juli 2009 av dabear

[4588pkdkrikue5c]

100% høgde er faktisk eit ganske omdiskutert emne - men eg hugser eg fekk det til ein gong ved å legge til height:100% til alle divar den diven du vil ha til å vere 100% er inni. Det gjeld óg body.

Videre kan du sette height:100%; på diven du vil ha 100% høg, og derretter position:absolute.

 

Vanskeleg å forklare, sjå heller her du.

[dabear]

Se der ja. Jeg la til følgende:

 html, body{
	height:100%; /* needed for container min-height */
}
#dialog{
 /* (...)*/
	height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

min-height:100%; /* real browsers */
}

 

Nå er det bare én ting som gjenstår. Borderen jeg bruker rundt #dialog er på 2px (altså 4px totalt). Denne gjør at #dialog blir 4 piksler for stor, og dermed skaper scrolling. Er det mulig å trekke fra 4 piksler fra høyden (nå er den jo spesifisert i prosent)?

Endret 12. juli 2009 av dabear

[4588pkdkrikue5c]

Kan du ikkje berre gå ned i prosent på #dialog? Velje 96-7% eller noko slikt? Body er jo framleis 100%, så det burde gå grett