[CSS]Div hoogte bepalen met inhoud alleen javascript - Softwareontwikkeling

vrijdag 12 mei 2006 17:22

Acties:

Topicstarter

Ik zit met een probleem, waar ik met mijn eigen kennis niet uit kom. Voor een site heb ik een container-div met daarin een tree (dmv javascript) en een divje met de inhoud.
Voor de tree te maken, gebruik ik het javascript van André die je ook hier kan vinden.
De indeling van mijn html:

HTML:

<div id="container">
    <div id="tree">
        <script src="./includes/treeview/astree.js"></script>
        <script src="./includes/treeview/tree.js.php"></script>
        <script type="text/javascript">
        Initialize("astreeContainer");
        </script>
    </div>
    <div id="content">Hier een heel verhaal</div>
</div>

Als de content groeit, zal de container meegaan, dat werkt netjes met css. Als echter nu de grootte van de tree (dmv php opgebouwd) groeit, komt deze in Firefox buiten de container-div. Op zich best logisch, want in de tree-div staat maar 1 regel javascript.
In IE groeit de container mee als de tree groeit, maar in FF dus niet. Nu kan je natuurlijk de hoogte van de tree uitlezen, net als de hoogte van de content. De grootste van die twee wordt dan ook de hoogte van de container.
Als je namelijk alleen de hoogte van de tree uitleest, en die in de container zet, kan de content juist niet meer meegroeien.

Maar is er een elegantere oplossing?

vrijdag 12 mei 2006 17:24

Acties:

crisp

Devver

Pixelated

Waarom zou die div niet 'meegroeien'? Wordt het tree-menu soms gefloat ofzo?

Intentionally left blank

vrijdag 12 mei 2006 17:31

Acties:

frickY

Heb je "height: 100%" gebruikt?

Maak daar iets van als

code:

1 2	div {min-height: 100%} * html div {height: 100%}

De eerste is voor firefox. Die aangeeft dat hij minstens 100% hoog dient te zijn, en mee kan groeien.
De 2de leest alleen IE, waardoor je je huidige situatie zoals nu in IE behoud.

vrijdag 12 mei 2006 20:34

Acties:

mithras

Topicstarter

crisp schreef op vrijdag 12 mei 2006 @ 17:24:
Waarom zou die div niet 'meegroeien'? Wordt het tree-menu soms gefloat ofzo?

Sorry, dat is iets wat ik ben vergeten te melden. Verder is de CSS niet heel relevant dacht ik, maar je hebt gelijk. De tree staat op float:left en de content met float:right.

frickY schreef op vrijdag 12 mei 2006 @ 17:31:
Heb je "height: 100%" gebruikt?

Maak daar iets van als
code:
1
2
div {min-height: 100%}
* html div {height: 100%}
De eerste is voor firefox. Die aangeeft dat hij minstens 100% hoog dient te zijn, en mee kan groeien.
De 2de leest alleen IE, waardoor je je huidige situatie zoals nu in IE behoud.

Ik wil niet dat mijn div 100% is. Ik neem aan dat je dit bedoeld voor de container. Eigenlijk is het dit geval:

HTML:

<body>
<div id="content">
     <div id="header">Header</div>
     <div id="content">Content</div>
     <div id="footer">Footer</div>
</div>
</body>

De content wordt opgebouwd door een classe in php. Omdat ik echter bij een pagina graag een tree wilde gebruiken, heb ik ervoor gekozen de content div te gebruiken als container en hierin 2 andere div's te zetten, zoals het in de TS staat vermeld. Omdat dit eigenlijk niet relevant was, heb ik het achterwege gelaten.
In ieder geval het antwoord op je vraag: er zit geen height aan de div's verbonden, alleen aan de header en footer.

vrijdag 12 mei 2006 23:21

Acties:

crisp

Devver

Pixelated

Mithras86 schreef op vrijdag 12 mei 2006 @ 20:34:
[...]
Sorry, dat is iets wat ik ben vergeten te melden. Verder is de CSS niet heel relevant dacht ik, maar je hebt gelijk. De tree staat op float:left en de content met float:right.

Dat is dus wel van belang want dat is de oorzaak

Floated elements zitten niet in de flow, dus het containing element zal niet automagisch uitrekken - dat IE dat wel zomaar doet is tegen de specificaties in.
Er is een uitzondering; dat is wanneer het containing element een andere waarde voor overflow heeft dan 'visible', dus 'auto' of 'hidden'. Een ander methode is een element na je float op te nemen met een clear-property.

Intentionally left blank

zaterdag 13 mei 2006 00:33

Acties:

JHS

Splitting the thaum.

Zie ook deze testcase

.

DM!