Søg
Avatar billede chrishunter Nybegynder
25. maj 2007 - 08:16 Der er 19 kommentarer og
1 løsning

<div> elementer lige høje - fylde højden ud

Jeg har et websted med det klassiske lay-out med header og footer og derimellem et hovedpanel og sidepaneler til venstre og højre herfor.
Det er implementeret med <div> tags, hvor sidepanelerne er placeret med float, og hovedpanelet så i siderne har marginer, der er en smule større end sideelementernes bredde.
Så langt så godt

Men hvordan får jeg hovedpanelet og sidepanelerne til at blive lige høje?
Jeg vil med andre ord gerne have, at de alle udfylder den plads, der bliver skabt mellem header og footer.

Det relevante i .css filen ser nogenlunde således ud

#left  {float: left;  width: 100px }
#right  {float: right; width: 100px }

#main  {margin-left:  105px;
        margin-right: 105px; }

#footer {clear: both; }


Mvh Christian
Avatar billede boxer Praktikant
25. maj 2007 - 08:35 #1
Tja, jeg har brugt et ekstra CSS dokument til at definere højden på elementerne.
Det betyder at du skal have et ekstra til hver side. Det skal så rettes hver gang du tilfører siderne noget mere indhold.

Det er den eneste løsning jeg synes fungerer sammen med designet.
Avatar billede roenving Novice
26. maj 2007 - 23:37 #2
-- du kan også vælge, at både venstre- og højre-panelet har samme baggrund, som du så også kan sætte på det omkransende element !-)
Avatar billede chrishunter Nybegynder
28. maj 2007 - 15:46 #3
Jeg tror ikke, jeg helt forstår.

Men det, jeg vil have, er, at panelerne følges ad. Så de alle automatisk får den højde, som det panel, der i øvrigt ville fylde mest i højden.

Men det kan måske ikke lade sig gøre uden at bruge <table>, eller hva'?
Avatar billede roenving Novice
28. maj 2007 - 15:51 #4
Nej !-)
Avatar billede w13 Novice
28. maj 2007 - 15:53 #5
Jeg tror det var brugeren Node2c, der skrev denne kode her på eksperten for et par dage siden:
-------------------------------------
<html>
<head>

<script type="text/javascript">
<!--
var elm = ['venstre','midt'];

function DivHeight(){
    var maxH = 0;
    for(i=0;elms.length>i;i++){
        maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
    }
    for(i=0;elms.length>i;i++){
        document.getElementById(elms[i]).style.height=maxH + 'px';
    }
}
// -->
</script>

</head>
<body onload="DivHeight()">

<div>

  <div id='venstre'>
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
  </div>

  <div id='midt'>
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
  </div>
</div>

</body>
</html>
Avatar billede roenving Novice
28. maj 2007 - 15:54 #6
Tjah, joeh ...

-- man kunne også aftaste højden onload med javascript og så sætte den, f.eks.

<script type="text/javascript">
var divs = ['left','middle','right'];

function syncronizeDivs(){
    var maxH = 0;
    d = document.getElementsByTagName("DIV");
    for(i=0;d.length>i;i++){
        for(j=0;divs.length>j;j++){
            if(d[i].className==divs[j])maxH = Math.max(maxH,d[i].offsetHeight);
        }
    }
    for(i=0;d.length>i;i++){
        for(j=0;divs.length>j;j++){
            if(d[i].className==divs[j])d[i].style.height=maxH + 'px';
        }
    }
}
</script>
Avatar billede w13 Novice
28. maj 2007 - 15:54 #7
Hov!
------------------------------
<html>
<head>

<script type="text/javascript">
<!--
var elm = ['venstre','midt'];

function DivHeight(){
    var maxH = 0;
    for(i=0;elm.length>i;i++){
        maxH = Math.max(maxH,document.getElementById(elm[i]).offsetHeight);
    }
    for(i=0;elms.length>i;i++){
        document.getElementById(elm[i]).style.height=maxH + 'px';
    }
}
// -->
</script>

</head>
<body onload="DivHeight()">

<div>

  <div id='venstre'>
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
  </div>

  <div id='midt'>
    linieskift<br />
    linieskift<br />
    linieskift<br />
    linieskift<br />
  </div>
</div>

</body>
</html>
Avatar billede roenving Novice
28. maj 2007 - 15:55 #8
Tror du har ret i, at det var notes2c, og han brugte også min synchronizeDivs !-)
Avatar billede w13 Novice
28. maj 2007 - 15:58 #9
Ah, ja, notes2c :)
Avatar billede boxer Praktikant
28. maj 2007 - 16:02 #10
Hmm, hvad bliver resultatet hvis den der ser siden ikke har slået javascript til?
Avatar billede w13 Novice
28. maj 2007 - 16:09 #11
Så skulle resultatet gerne bare være, som før du fik denne kode. :)
Avatar billede roenving Novice
28. maj 2007 - 16:12 #12
-- dem, der ikke har javascript, kan slet ikke se, de læser kun kode og mailadresser og/eller links, det er nemlig søgemaskinebots og mailharvesters !-)
Avatar billede w13 Novice
28. maj 2007 - 16:17 #13
=P
Avatar billede boxer Praktikant
28. maj 2007 - 16:29 #14
Kan denne bruges:
http://www.webdesign101.dk/csslayout/equal_height_spalter.php
Avatar billede chrishunter Nybegynder
28. maj 2007 - 18:58 #15
Meget mystisk.
For det link er præcis, hvad jeg har ledt efter. Og når jeg går ind på eksempel ind, så ser jeg netop noget, der ligner det rigtige. Men når jeg kopierer sidens kildekode over i en fil og lægger denne på min egen webserver, så mangler linierne, der viser adskillelsen mellem spalterne. Og hvis jeg ændre en spaltes baggrundsfarve, så viser det sig også, at den ikke er i fuld højde.

Mystisk, mystisk, mystisk ...
Avatar billede chrishunter Nybegynder
28. maj 2007 - 18:58 #16
"eksempel 1" naturligvis :-)
Avatar billede boxer Praktikant
28. maj 2007 - 23:15 #17
Hans ekspempler kan godt være lidt kryptiske :o)

Hvis du er opsat på den løsning kan forfatteren træffes på html.dk under nyhedsgrupper.
Avatar billede chrishunter Nybegynder
31. maj 2007 - 13:47 #18
Jeg accepterer svaret. Bl.a fordi jeg også lige fik øjnene op for javascript.
Men jeg vil egentligt også gerne give boxer 30 point, da det var meget præcist det, jeg ledte efter (og som jeg nu har fået til at virke).

Tak for hjæpen,
Christian
Avatar billede boxer Praktikant
31. maj 2007 - 14:52 #19
Velbekomme - point ikkke nødvendigt :o)
Avatar billede chrishunter Nybegynder
31. maj 2007 - 14:57 #20
Tak - ellers siger du bare til ;-)
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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
18/0720:34 Tidsbestemt Gendannelse - ny funktion i Windows Af Uvanga i Windows
White papers
Flere white papers »