Archief - CSS: div stretchen

z

zabulus

Legacy Member

• 10 dec 2005

• #1

Jow,

Ik ben mij hier nu al enkele uren aan het zot zoeken op een simpel probleem lijkt mij. Ik heb al veel sites gevonden over stretching ma kan der nergens aan uit.

Het probleem is:
Ik heb dus 3 div's op een pagina, namelijk div "container" een div "links" en een div "rechts"
De rechtse div bevat meer tekst als de linkse div, en is dus maw langer als de linkse.
De linkse div zou moeten mee stretchen tot op het einde van de rechtse div.

Kleine schetsing van het probleem: http://www.zabulus.be/testdivs.html

Hopelijk kan iemand mij helpen

Grtz, zabulus

D

Da Turtle

Legacy Member

• 11 dec 2005

• #2

daar wil ook een keer 't antwoord op weten , kheb et gevraagd aan een docent webtechnologie en die wist et ook nie , kheb ook al zitten proberen en sukkelen om zoiets in elkaar te krijgen.

p

peng

Legacy Member

• 11 dec 2005

• #3

ik snap uw probleem niet echt sorry

R

Radiance

Legacy Member

• 11 dec 2005

• #4

Het groene kaderke zou even hoog (nuja laag), moeten uitkomen als het rechste. En dus 100% hoogte van zijn container moeten innemen.

Nuja, bij mijn weten is het bijna onmogelijk.
Je kan dit immers enkel oplossen door de linkerkader een height van 100% te geven. Maar er is daarboven niks, buiten het browserwindow met een fixed height, maw vanaf dat je dit doet pakt hij 100% van uw venster in (althans in FF, in IE doet het gewoon niks)

R

Rvl

Legacy Member

• 11 dec 2005

• #5

Als het is om u layout "proper" en symmetrisch te houden is kunt ge da oplossen me gewoon ne background image te maken. Een andere manier om dit probleem op te lossen is imo nogal wa buggy, zal dus nie in alle browsers werken volges mij als er een oplossing besta (want die zijn er wel).

z

zabulus

Legacy Member

• 11 dec 2005

• #6

het probleem is dat die div gestyled wordt dmv een bgcolor en borders, dus als dat in css kan heb ik geen zin om daar een bg image voor te maken

K

Kn0t

Legacy Member

• 11 dec 2005

• #7

Ik denk dat dat enkel ofwel met een background-image (google 'faux columns') ofwel met een simpel javascriptje in de aard van

Code:

var leftDiv=document.getElementById('links');
var rightDiv=document.getElementById('rechts');
var maxHeight=Math.max(leftDiv.offsetHeight, rightDiv.offsetHeight)+'px';
leftDiv.style.height=maxHeight;
rightDiv.style.height=maxHeight;

op te lossen valt.

Indien het anders kan, zou ik het ook graag weten. K'heb dit probleem namelijk ook al regelmatig tegengekomen. Net als het footer probleem (footer die steeds helemaal onderaan de pagina staat, onafhankelijk vd content).

B

BertG

Legacy Member

• 11 dec 2005

• #8

Ben die vraag nu es meer dan beu geworden

Hier heb je een mooi voorbeeldje gezet dat in IE, FF en opera werkt (graag feedback van safari users )

http://bertg.be/divstretch.html

Bezie de source en u zult zien dat het niet zo moeilijk is

Alleen IE doet wat lastig eh
(zet deze anders es in een stiky of iets)

z

zabulus

Legacy Member

• 11 dec 2005

• #9

Ja inderdaad kn0t, met dat javascriptje werkt het wel. Als er iemand nog een oplossing weet om dit te kunnen doen in css zou natuurlijk ook altijd handig zijn.

B

BertG

Legacy Member

• 11 dec 2005

• #10

zabulus zei:

Ja inderdaad kn0t, met dat javascriptje werkt het wel. Als er iemand nog een oplossing weet om dit te kunnen doen in css zou natuurlijk ook altijd handig zijn.

Klik om te vergroten...

euh, zie mijn post juist boven die van u???

K

Kn0t

Legacy Member

• 11 dec 2005

• #11

Hmm, en zou je dat eens kunnen toepassen op dat voorbeeld van zabulus? Ik heb het eens geprobeerd en hier lukt het niet in IE. In FF stretcht hij wel.

http://www.knot.be/testdivs.html

B

BertG

Legacy Member

• 11 dec 2005

• #12

Kn0t zei:

Hmm, en zou je dat eens kunnen toepassen op dat voorbeeld van zabulus? Ik heb het eens geprobeerd en hier lukt het niet in IE. In FF stretcht hij wel.

http://www.knot.be/testdivs.html

Klik om te vergroten...

de height van je #container op 1px zetten voor IE. IE heeft een expliciete hoogte nodig zo te zien.

z

zabulus

Legacy Member

• 12 dec 2005

• #13

mm das mooi
n1 bert

zet deze maar rap in de sticky!

K

Kn0t

Legacy Member

• 12 dec 2005

• #14

Height op 1px gezet, maar blijkt niets aan de zaak te veranderen.

http://knot.be/testdivs.html

Werkt het bij jou ondertussen al zabulus?

B

BertG

Legacy Member

• 12 dec 2005

• #15

Code:

<?xml version="1.0" encoding="utf-8" ?>

Dees bovenaan de source ook zetten. Vreemd genoeg maakt dat voor IE dus een verschil.

Heb hier half uurke op zitten zoeken

f

frensj

Legacy Member

• 12 dec 2005

• #16

denk dat mijn vraag hier ook wel past precies... (kwestie van geen nieuwe topic te openen)

site
(geen commentaar op kleuren en andere dinen ok ) in opera wordt die layout weergegeven zoals ik wil, maar in firefox niet (in IE is enkel de site links gecentered, kannek nog mee leven) maar hoe los ik dit op?