Endre høyde på div i takt med toogle funksjon.

[Emaxine]

På en webside jeg holder på å lage, har jeg en container div med fast høyde mellom menyen i toppen og footer i bånn. Inne i denne containeren har jeg en toogle funksjon som viser/skjuler en div uten fastsatt høyde som inneholder en tekststreng med ukjent lengde. Blir denne tekststrengen for lang, legger den seg over footer og fortsetter nedover.

 

Jeg ønsker så klart ikke at teksten skal legge seg over footer, men at footer skal flytte seg nedover sammen med teksten. Samtidig så vil jeg at footer skal ligge på samme posisjon om tekstrengen er såpass kort at den ikke ville ha lagt seg over.

 

Noen forslag til hvordan jeg kan løse dette problemet?

 

Ser for meg at det kanskje må bli en funskjon som endrer høyden på container div etter størrelse på string.

Endret 22. november 2012 av Emaxine

[Flaskehals]

Prøv følgende på container div:

 

min-height: antall pixler;
height: auto;

 

Dersom footer er posisjonert med en absolutt lokasjon, må du nok finne en mer dynamisk måte å posisjonere divene dine. Litt vanskelig å vite uten å se koden.

Endret 22. november 2012 av Sytklutn

[Emaxine]

Aha. Flott, tusen takk for svar. Dette skal jeg teste ut!

Footer er satt til relative, så det burde fungere.

[Emaxine]

Jeg ser jeg har forklart koden feil. Jeg har to container div. (Se kode)

og at indreContainer er satt til absolutt. Da vil jo ikke hjelpe å sette containeren hight: auto;.

 

 

 

<div id="container">
<div id="menuTop">
</div>
 <div id="indreContainer">
 </div>
</div>
<div id="footer"></div>

 

CSS

 

#container{
position: relative;
margin: 0px;
padding: 0px;
width: 1870px;
min-height: 1067px;
height: auto;
background-color: yellow;
}
#indreContainer{
position: absolute;
top: 220px;
left: 126px;
padding: 0px;
min-height: 800px;
height: auto;
width: 1095px;
z-index: 2;
}
#footer{
position: relative;
padding: 0px;
top: 0px;
left: -8px;
width:1870px;
height: 57px;
background-image: url("bilde.png");
background-repeat: repeat-x;
z-index: 2;
}

Endret 22. november 2012 av Emaxine

[Flaskehals]

Jeg har aldri vært noen fan av position, benytter meg selv av float og margin.

 

Hadde vært mye enklere å hjelpe dersom du har en URL vi kan besøke for å se litt på hvordan du har tenkt å bygge nettsiden.

[Emaxine]

Det skjønner jeg. For øyeblikket har jeg ikke det.

Jeg løste problemet med å forandre i koden og sette posisjonen til #indreContainer som relative. Men det hadde vært kjekt om noen hadde en god løsning for hvordan man gjør det om man har diver med ulike posisjoner slik jeg hadde først.