CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

radion Nybegynder

12. april 2007 - 11:10 Der er 10 kommentarer og
1 løsning

div1.height=div2.height ?

Hej eksperter

Jeg har 2 divs ved siden af hinanden, hvor den ene er float:left
den højre har variabel højde alt efter hvilket indhold der er i den

spørgsmålet er om jeg kan få den venstre divs højde til at være styret af højden af den højre?

mvh radion

Synes godt om

hmm10 Nybegynder

12. april 2007 - 13:57 #1

Du kan altid finde en højre via javascript og så resize senere hen.

Synes godt om

roenving Novice

12. april 2007 - 14:28 #2

Ja, det er nødvendigt med javascript til at gøre den slags ...

-- du kan dog bruge et simpelt trick, nemlig at lave en omkransende div og give den samme baggrund som den venstre, og så tvinge denne omkransende tingest til at omkranse dn længste fysisk:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simpelt hold højde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#menu a,#menu a:link,#menu a:visited{color:#ddd;text-decoration:none;line-height:1.4;}
#menu a:hover,#menu a:active{color:yellow;text-decoration:overline underline;}
</style>

</head>
<body>
<div style="position:relative;width:820px;margin:0 auto;background-color:green;text-align:center;">
<div id="menu" style="float:left;width:120px;;background-color:green;color:#bbb;">
<h1>Menu</h1>
<a href="#">Her er et menulink</a>
<a href="#">Her er et menulink</a>
<a href="#">Her er et menulink</a>
<a href="#">Her er et menulink</a>
<a href="#">Her er et menulink</a>
<a href="#">Her er et menulink</a>
</div>
<div id="content" style="float:left;width:690px;padding:5px;background:white;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>
</div>
<div style="clear:both;line-height:0;font-size:0;"> </div>
</div>
</body>
</html>

Synes godt om

syntax_hh Nybegynder

14. april 2007 - 19:08 #3

Sæt denne ind i head:

<script type="text/javascript">
//<![CDATA[
onload=function() {
document.getElementById('div1').style.height=
document.getElementById('div2').offsetHeight+"px";
}
//]]>
</script>

Synes godt om

radion Nybegynder

15. april 2007 - 09:09 #4

jeg prøver mig lige frem med de forskellige, tak for hjælpen indtil videre, jeg vender tilbage

Synes godt om

radion Nybegynder

15. april 2007 - 09:27 #5

hvor [CDATA i øvrigt?

Synes godt om

radion Nybegynder

15. april 2007 - 09:32 #6

syntax_hh det fungerer rigtig fint, og kunne jeg lokke dig til at konstruere den sådan at den først checker hvilken div der er mindst, og så sætter den = den størstes højde?

roenving: ja, det gør jeg i forvejen, problemet ligger mest i at jeg har en linie mellem de 2 (lavet som border-left på den højre) der gerne skulle føres med ned, og jeg ved ikke hvilken af diverne der er højest, det kan skifte fra side til side

Synes godt om

radion Nybegynder

15. april 2007 - 09:59 #7

"hvor [CDATA i øvrigt?" = "hvorFOR [CDATA i øvrigt?"

Synes godt om

radion Nybegynder

15. april 2007 - 10:10 #8

Syntax_HH, nevermind, jeg klarede det selv :) (glæder mig over at js og php har fælles træk :D

<script type="text/javascript">
//<![CDATA[
onload=function() {
if(document.getElementById('leftbar').offsetHeight>document.getElementById('main').offsetHeight){
document.getElementById('main').style.height=document.getElementById('leftbar').offsetHeight+"px";
}
else
{
document.getElementById('leftbar').style.height=document.getElementById('main').offsetHeight+"px";
}
}
//]]>
</script>

men, jeg er stadig nysgerrig over dit //<![CDATA[ tag ?

og smid et svar

Synes godt om

syntax_hh Nybegynder

15. april 2007 - 13:56 #9

CDATA bruges i sammenhæng med XML til at printe koden i stedet for at udføre den. Det må lige være en smutter at den kom med der :-)

Synes godt om

radion Nybegynder

15. april 2007 - 14:29 #10

ahh, :)

tak for hjælpen alle

Synes godt om

olebole Juniormester

16. april 2007 - 13:20 #11

<ole>

syntax_hh >> "CDATA bruges i sammenhæng med XML til at printe koden i stedet for at udføre den"

Nej, det er helt forkert. En CDATA-escaping anvendes omkring alle kodedele, som XML-parseren ikke kan 'tåle' ... herunder tegnet '<', der ellers vil blive tolket som begyndelsen på et XML-tag.

... og så kan XML-kode iøvrigt ikke 'udføres'. XML er et markup-sprog, der ikke indeholder funktionalitet ;o)

/mvh
</bole>

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS