[HTML/div] max-height icm overflow

[turkosh]

Hoi allemaal,

Ik hoop dat iemand het weet. Ik ben een <div> veld aan het opzetten die zich enigziens moet aanpassen aan de dynamische content (tabel rijen). Als er veel content is moet er natuurlijk in de div veld gescrolled moeteten kunnen worden (overflow).
Met een normale heigt is het div veld altijd even groot en als er weinig content is staat dat natuurlijk niet mooi. Dus dacht ik er zal ongetwijfel over die probleem nagedacht zijn.
Ik vond verwijzingen naar max-height en dacht, leuk dat lost het op. Het probleem is dat max-heigt i.c.m. overflow niet werkt.
Een voorbeeldje:

code:

<div style="background-color:#FF00FF; height:2cm; overflow:auto;">
<table>
<tr>
<td>
This <code>div</code> should <br>have a <br>height of <br>2cm.
</td>
</tr>
</table>
</div>

Deze stukje code zou mijnsinziens in de browser als een paarse vlak met een scrollbar ernaast te zien moeten zijn. Maar helaas.
Wie weet hoe ik deze probleem moet tackelen?

Edit: Dit heeft betrekking op IE. In Firefox werkt het netjes

[ Voor 11% gewijzigd door turkosh op 09-02-2006 13:59 ]

[Vecodo]

Max-height werkt toch helemaal niet in IE ?!
Net even gecontroleerd en max-height word inderdaad niet ondersteunt door IE 6...

--edit---

Net even je code getest maar bij mij (ie 6.)
Krijg ik een paarse 2cm hoge div. En op het moment dat de content groter word, komt er een scrollbar aan de rechterzij kant.

--edit--

Dus je bedoeld het volgende :
Je wilt een div die zich volkomen kwa grootte aanpast aan de content.
voorbeeld:

code:

|----------------------------|
|  1 regel tekst        
------------------------------
Als er 1 regel tekst in staat is de Div niet groter dan 1 regel tekst
|---------------------------|
| Meer dan 1          
| Regel tekst         
| Veel meer           
-----------------------------
En zo moet hij worden als er meerder instaan ?

Begrijp ik zo het verhaal goed ?

[ Voor 150% gewijzigd door Vecodo op 09-02-2006 14:37 ]

[turkosh]

oops, verkeerde code Daarin zit nog height erin.

code:

<div style="background-color:#FF00FF; min-height:20px; max-height:100px; overflow:auto;">
<table>
<tr>
<td>
This <code>div</code> should <br>have a <br>height of <br>2cm.
<br>test<br>test<br>test<br>test<br>test<br>test
</td>
</tr>
</table>
</div>

Deze werkt dus niet in IE.

[Vecodo]

turkosh schreef op donderdag 09 februari 2006 @ 14:44:
Knip * Deze werkt dus niet in IE.

True, want IE ondersteunt de Max-height niet !

[ Voor 112% gewijzigd door Vecodo op 09-02-2006 14:53 ]

[turkosh]

Thanx voor de reminder. Dat gevoel had ik ook al
Is javascript in dit geval dus de enige oplossing?

[Vecodo]

turkosh schreef op donderdag 09 februari 2006 @ 14:55:
Thanx voor de reminder. Dat gevoel had ik ook al
Is javascript in dit geval dus de enige oplossing?

Volgens mij..( ben niet 100% zeker )

je hebt wat standaard js-CSS hacks hiervoor.
FF Google
http://www.google.nl/sear...&q=max-height+in+IE&meta=

[turkosh]

tnx. Ik had ookal hetzelfde zoekopdracht uitgevoerd. Ik hoopte dat dat misschien niet nodig zou zijn.

[Danjel]

code:

<div style="background-color:#FF00FF; height:100px; overflow:auto;">
<table>
<tr>
<td>
This <code>div</code> should <br>have a <br>height of <br>2cm.
<br>test<br>test<br>test<br>test<br>test<br>test
</td>
</tr>
</table>
</div>

Werkt dit ook niet? Of is dat niet wat je wilt?

[turkosh]

Danjel schreef op vrijdag 10 februari 2006 @ 00:35:

code:

<div style="background-color:#FF00FF; height:100px; overflow:auto;">
<table>
<tr>
<td>
This <code>div</code> should <br>have a <br>height of <br>2cm.
<br>test<br>test<br>test<br>test<br>test<br>test
</td>
</tr>
</table>
</div>

Werkt dit ook niet? Of is dat niet wat je wilt?

Dat werkt wel, maar stel dat ik content heb die minder is dan 100px. Dan blijf ik de rest van de div veld houden en dat is niet de bedoeling.

Edit:
Het probleem is opgelost. Ik heb op het net een simple javascript gevonden die het max-height implementeert in css. Even vastleggen voor de komende nageslacht

code:

div.minmax {
    max-height: 500px; /* Moz, Opera.. */
    overflow:auto;
    height: expression(this.scrollHeight > 500 ? "500px" : "auto"); /* IE */
}

[ Voor 35% gewijzigd door turkosh op 10-02-2006 09:19 ]