Avatar billede moejensen Nybegynder
07. marts 2004 - 20:02 Der er 13 kommentarer og
1 løsning

hjælp til højde på div

Jeg har en side jeg har bygget op i css. Jeg har en menu i venstre side og en indholds side i højreside. min css kode ser således ud

#container {
    position: absolute;
    width: 760px;
    margin-left: -380px;
    left: 50%;
}

#menu {
    float: left;
    width: 150px;
    border-top: 1px solid #878787;
    border-left: 1px solid #878787;
    border-right: 1px solid #878787;
}

#main {
    float: right;
    padding: 5px 5px 5px 5px;
    width: 608px;
    height: 100%;
    border-top: 1px solid #878787;
    border-left: 1px solid #878787;
    border-right: 1px solid #878787;
    background-color: #ffffff;
}

container, er uden om de to div'er og sørger for at det står midt på siden.

men hvordan sikre jeg at menuen altid er lige så høj som indholdssiden, så man ikke pludselig kan se sidens baggrundbillede under menuen, fordi diven ikke går helt ned til bunden??
Avatar billede roenving Novice
07. marts 2004 - 22:11 #1
<script type="text/javascript">
var divs = ['main','menu'];

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].id==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].id==divs[j])d[i].style.height=maxH + 'px';
        }
    }
}
</script>

<body onload="syncronizeDivs()">
Avatar billede moejensen Nybegynder
07. marts 2004 - 22:35 #2
du er for sej det virker sku...

Men det undre mig hvorfor jeg ikke bare kunne sætte height på menuen?

laver du et svar
Avatar billede roenving Novice
07. marts 2004 - 22:44 #3
Problemet vil jo først være der, hvis din main-div er højere end skærmsiden (og med den kode du har vil den også være der i andre browsere end IE, men hvis du tilføjer følgende til dit stylesheet skulle browserne opføre sig nogenlunde ens !-)

html,body{height:100%;padding:0px;margin:0px;}
#container {
    position: absolute;
    width: 760px;
    margin-left: -380px;
    left: 50%;
    height:100%;
}

-- og velbekomme '-)
Avatar billede moejensen Nybegynder
08. marts 2004 - 07:50 #4
det funker sku bare, hvor er det super.
Avatar billede moejensen Nybegynder
08. marts 2004 - 08:13 #5
hvis jeg nu gerne vil have placeret et link hvor der står printvenlig version i bunden af selve menu div'en, er det så muligt?
Avatar billede roenving Novice
08. marts 2004 - 16:06 #6
Tjah, men det virker ikke konsistent i de forskellige browsere:

bottom:0px;
Avatar billede mik789 Nybegynder
08. marts 2004 - 16:10 #7
roenving> en anden script metode som er enklere at følge for en scriptnovice som mig (om end ikke smartere) er:

<script type="text/javascript"><!--
function setDivHeight() {
var menuDiv = document.getElementById('menu');
var mainDiv = document.getElementById('main');
  if (menuDiv.offsetHeight > mainDiv.offsetHeight) {
    mainDiv.style.height = menuDiv.offsetHeight-1+'px';
  }else if (menuDiv.offsetHeight < mainDiv.offsetHeight) {
    menuDiv.style.height = mainDiv.offsetHeight-11+'px';
  }
}
//--></script>

<body onload="setDivHeight();">

Dvs. man sætter simpelthen bare højden af den ene div til at være lig med højden af den anden. Til det bruger man offsetHeight der er inklusiv evt. padding og border som derfor skal trækkes fra.
Avatar billede roenving Novice
08. marts 2004 - 16:17 #8
>>mik789

Jepz, den jeg viste var også lavet til et vilkårligt antal, men gør det samme !-)
Avatar billede mik789 Nybegynder
08. marts 2004 - 16:20 #9
ok - og hvis der er flere end de to ('menu' og 'main') tilføjer man dem så bare i dit divs array i starten af scriptet, ik'?
Avatar billede mik789 Nybegynder
08. marts 2004 - 16:28 #10
men så vidt jeg kan se tager du ikke højde for at padding og border kan være forskellig i de forskellige divs, som de er i moejensens kode....
Avatar billede roenving Novice
08. marts 2004 - 16:51 #11
Nej, det gør jeg ikke, for offsetHeight i min tankegang bør give den fulde højde af elementet, som bør indeholde padding, men _ikke_ bør indeholde margin og border (iflg. w3cs box-model: http://www.w3.org/TR/REC-CSS2/box.html !-)

Men, hvis du vil have det til at fungere fuldstændig ens i alle browsere, skal du (ifølge Danny Goodman: The JavaScript Bible !-) lave en længere liste over de forskellige browsere og styresystemer, og så i en ret kompliceret struktur angive de forskellige permutationer for tilpasning !o]
Avatar billede mik789 Nybegynder
08. marts 2004 - 16:56 #12
men height (som er ekskl. padding, border og margin) er så under alle omstændigheder heller ikke det samme som offsetHeight (som er inkl. padding), og dvs. hvis det er padding for nogle og ikke for andre divs er der et problem. Er det ikke rigtigt?...
Avatar billede roenving Novice
08. marts 2004 - 17:03 #13
Jo, det kan sagtens være et problem, og de tests, jeg har lavet for konkrete sider, har også måttet tage to forskellige indgangsvinkler til de to browsere, jeg tester med ...

-- og dit array-spørgsmål: Ja !-)
Avatar billede moejensen Nybegynder
08. marts 2004 - 20:00 #14
jeg har i forvejen to css layout scripts, et til IE og et til NS, Opera og mizilla, så jeg har tilrettet det der skal rettes mvh padding osv.
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

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