Avatar billede lerchedahl Nybegynder
12. marts 2002 - 10:27 Der er 26 kommentarer og
2 løsninger

height på div

hej eksperter

Jeg har 2 <div>s på min side, og vil gerne have den ene <div> til at have den samme height som den anden. Hvordan gør jeg det? den <div> som dikterer højden varierer dynamisk...(PHP)

/lerchedahl
Avatar billede tknudsen Nybegynder
12. marts 2002 - 12:28 #1
<script>

function setHeight()
{
  var objDiv1 = document.getElementById('div1');
  var objDiv2 = document.getElementById('div2');

  objDiv2.style.height = objDiv1.style.height;

  window.setTimeout('setHeight();',500);
}
</script>

<body onLoad="setHeight()">
<div id="div1" style="height:200px;background-color:#00FF00">
div1
</div>

<div id="div2" style="background-color:#FF0000">
div2
</div>

</body>


...

Når body er loaded kalder den setHeight()funktionen, som sætter div2 lige så høj som div1. Efter ½ sekund kalder funktioene sig selv.
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 12:40 #2
hej, og tusind tak for svaret. Jeg har lavet det lidt om, så lige et par spørgsmål:

Der er to div's som skal følge den ene

Den div som dikterer height ligger i een fil, og dem som skal følge med ligger i en anden, bliver inkluderet... Indholdet af den som dikterer højden ændrer sig ikke dynamisk mere, så det er ikke nødvendigt med en timeout, vel?
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 12:49 #3
erhm... det virker ikke :-(

min div2 følger ikke højden på div1 ...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 12:53 #4
får du en fejl ? hvilken ?

hvilken browser bruger du ? document.getElementById() funktioenen er fra DOM - så din browser skal understøtte DOM
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 12:57 #5
IE5

der er ikke nogen fejl som sådan (tror jeg), den gør bare ikke noget...

Og det er ikke fordi den kører funktionen inden filen med <div>erne er inkluderet, for jeg har prøvet at køre den manuelt efter, og det virker heller ikke... Er det fordi den div som dikterer højden ikke *har* nogen højde, forstået på den måde at den netop er dynamisk?
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 12:58 #6
...jeg har jo ikke defineret style="height: [x]px" for div1...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:00 #7
ohh - det er nok der fejlen er - jeg mener at den SKAL defineres (Evt til 0px !?) for at du kan læse den - dvs hvis den ikke er defineret returnere .style.height vist bare "undefined"...

der findes også en anden property man kan bruge - den prøver jeg lige at finde...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:02 #8
offsetHeight

så prøv med:

objDiv2.style.height = objDiv1.style.offsetHeight;
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:03 #9
jeg har prøvet at definere height for div1 uden held :-(
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:03 #10
ok, øjeblik...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:03 #11
det eksempel jeg startede med virker fint hos mig !?
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:10 #12
"argumentet er ugyldigt"

hvad det så end skal betyde...
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:10 #13
hmm, inkluderer du også den ene div med php?
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:14 #14
er det en javascript fejl ? eller en php fejl ?
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:16 #15
javascriptfejl...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:25 #16
ok - prøv at parse den offsetHeight så du er sikker på at det er en interger du tilskriver med:

objDiv2.style.height = parseInt(objDiv1.style.offsetHeight);
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:36 #17
jeg får bare "argumentet er ugyldigt"...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:36 #18
kan du se hvilken linie - og lige paste den herud på eksperten ?
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:43 #19
jamen det er ikke så nemt, når det er i php, for der inkluderes jo en del forskellige ting...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:44 #20
ok - så prøve at sætte en alert rundt om parseInt(...) :

objDiv2.style.height = alert(parseInt(objDiv1.style.offsetHeight));

så kan du se om programmet overhovedet kommer dertil - og hvad der kommer ud af den parseInt()
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:48 #21
der kommer ingen alert, men jeg får tilgengæld heller ingen fejl...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:49 #22
alert(objDiv1.style.offsetHeight);

?

Jeg tror problemet er hvad der kommer "ud af" objDiv1.style.offsetHeight.
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 13:53 #23
"objDiv1 er ikke defineret"

...men det skulle den ellers meget gerne være...
Avatar billede tknudsen Nybegynder
12. marts 2002 - 13:55 #24
har du lavet en variabel, som hedder objDiv1 ? eller er det id'et på <div>-taget ?
Avatar billede lerchedahl Nybegynder
12. marts 2002 - 14:01 #25
en variabel
Avatar billede Slettet bruger
12. marts 2002 - 17:13 #26
offsetHeight er ikke en del af style-attributten:

objDiv1.offsetHeight
Avatar billede Slettet bruger
12. marts 2002 - 17:32 #27
Dette virker i IE5 og NS6:

<html>
<head>
<script>
function setHeight() {
h = document.getElementById("div1").offsetHeight;
document.getElementById("div2").style.height = h;
}
</script>
</head>
<body bgcolor="#669966" onLoad="setHeight();">
<div id="div1" style="background-color: yellow; width: 100; position: absolute; left: 5; top: 5;">
<center>
Div1:
<br>
<script>
rand = Math.round(Math.random() * 10) + 3;
for (i = 0; i < rand; i++) document.write("<br>Bla");
</script>
</center>
</div>
<div id="div2" style="background-color: yellow; width: 100; position: absolute; left: 130; top: 5;">
<center>
Div2:
</center>
</div>
<div style="position: absolute; left: 5; top: 300;">
Prøv at <a href="#" onClick="self.location.reload(); return false;">reloade</a> siden!
</div>
</body>
</html>
Avatar billede lerchedahl Nybegynder
13. marts 2002 - 10:31 #28
Mange tak begge to, nu virker det hele så fint :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester