Få divs højde til at tilpasse sig anden div.

height:100%;

Skal på "center" og "inner".

Men hvis du nu viste os dit CSS, var det lidt nemmere, for det er ikke sikker, det er nok at smide det på "center" og "inner". Det kan desuden være der skal andet på også.

Det var ihvertfald ikke nok. Her er css'en:

body, html
{
    background-color: #fff;
    color: #000;
    margin: 0 auto 0 auto;
    padding: 0 auto 0 auto;
    text-align: center;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 10px;
}

div.clear {
    clear: both;
    height: 0;
}

h1{
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-weight: normal;
    color: #66969C;
    text-decoration: underline;
}

h2{
    margin: 0;
    padding: 0;
    font-size: 12px;
}


p{
    margin: 0;
    padding: 6px 0 6px 0;
}

img {
    border: none;
    margin: 0;
    padding: 0;
}

#outer {
    position: relative;
    top: 15px;
    width: 820px;
    height: auto;
    text-align: left;
    margin:  0 auto auto auto;
    height: 100%;
}

    #innerTop {
        width: 820px;
        height: 167px;
    }
   
        .innerTopTop {
            width: 820px;
            height: 69px;
            background-image: url(../Images/top.jpg);
            background-repeat: no-repeat;
            background-color: #fff;
            margin-bottom: 4px;
        }

        .innerTopMiddle {
            width: 820px;
            height: 69px;
            margin-bottom: 4px;
            background-color: #fff;       
        }

            .innerTopMiddleLeft {
                width: 144px;
                height: 69px;
                background-image: url(../Images/logo.jpg);
                background-repeat: no-repeat;
                background-color: #fff;
                float: left;
            }

            .innerTopMiddleLeft img {
                border: none;
                float: left;
                margin: 0;
                padding: 0;
            }

            .innerTopMiddleCenter {
                width: 558px;
                height: 69px;
                background-image: url(../Images/topCenter.jpg);   
                background-repeat: no-repeat;
                background-color: #fff;
                float: left;
            }
           
            .innerTopMiddleRight {
                width: 114px;
                height: 69px;
                background-color: #CFCDC6;   
                margin-left: 4px;
                float: left;
            }
           
                img.flag {
                    float: left;
                    padding-left: 25px;
                    padding-top: 15px;
                }

                img.site {
                    float: right;
                    padding-right: 25px;
                    padding-top: 15px;
                }

                form.search {
                    width: 104px;
                    position: relative;
                    top: 20px;
                    left: 5px;
                    margin: 0;
                    padding: 0;
                    height: 17px;
                    border: none;
                    background-color: #66969C;                           
                }           
   
                    input.submit{
                        float: left;
                        width: 18px;
                        height: 17px;
                        margin: 0;
                        padding: 0;
                    }
                   
                    input.inputText {
                        float: left;
                        margin: 0;
                        padding: 0;
                        height: 17px;
                        width: 80px;
                        border: none;
                        border-right: solid 1px #66969C;
                        font-size: 10px;               
                    }
       
        .innerTopBottom {
            width: 820px;
            height: 17px;
            background-color: #fff;
            margin: 0;
            padding: 0;
            background-image: url(../Images/navBack.gif);   
            background-repeat: repeat-y;
            float: left;

        }

    #innerBottom {
        margin: 0;
        padding: 0;
        width: 820px;
        height: auto;
    }
   
        .innerBottomLeft {
            width: 140px;
            margin-right: 4px;
            float: left;
        }
       
        .innerBottomLeftImg {
            width: 140px;
            height: 108px;           
            float: left;
            margin: 0 0 4px 0;
            padding: 0;
            background-image: url(../Images/bottomLeft.jpg);   
            background-repeat: no-repeat;           
        }
           
            .innerBottomLeftText {
                width: 109px;
                padding: 15px 20px 20px 11px;
                background-color: #66969C;
                margin: 0 0 4px 0;
                float:left;
                color: #fff;           
            }
           
            .innerBottomLeftText p {
                padding: 0;
                margin: 0;           
            }

        .innerBottomCenter {
            width: 558px;
            margin: 0;
            padding: 0;
            float: left;
        }   

            .innerBottomCenterTop {
                width: 558px;
                height: 251px;
                margin: 0;
                padding: 0;
                background-image: url(../Images/bottomCenter.jpg);   
                background-repeat: no-repeat;
                float: left;
            }   

       
            .innerBottomCenterBottom {
                width: 558px;
                margin: 0;
                padding: 0;
                float: left;
            }
           
                .news {
                    width: 112px;
                    margin: 0;
                    padding: 14px 6px 14px 21px;
                    float: left;
                }   
       
                .news p {
                    margin: 0;
                    padding: 0;
                }   
       
       
        .innerBottomRight {
            width: 114px;
            margin-left: 4px;
            float: right;
        }

        .innerBottomRightText {
            width: 114px;
            position: relative;
            top: 57px;
            background-image: url(../Images/rightRuler.gif);   
            background-repeat: repeat-y;
        }
               
            .innerBottomRightText p {
                padding: 0 11px 0 11px;
                margin: 0;               
            }
       
        /* Used for placing the print icon i right bottom corner */
        #print {
            margin: 0;
            padding: 0;
            width: 820px;
        }

            #print img {
                clear: both;
                float: right;
                position: relative;
                left: -4px;
                bottom: 28px;
            }
       
       
           
/* top menu */
.topNav {
    width: 820px;
}

.topNav ul {
    padding: 0 0 0 159px;
    margin: 0;
    list-style-type: none;
    border: none;
    width: 661px;
    float: left;
    height: 17px;
}

.topNav li {
    display: inline;
    padding: 0;
    margin: 0;
    list-style-type: none;
    border: none;
}

.topNav li a {
    color: #fff;
    margin: 0;
    padding: 0px 10px 4px 10px;
    text-decoration: none;
}

.topNav li.selected1 a {
    background-color: #fff;   
    color: #66969C;
}


.topNav a.contact {
    float: right;
    text-decoration: none;
    padding: 0px 40px 4px 40px;
}


/* Ensures that the a is centralized on the menubar - padding with disrupt the desing */
.hoverPadding {
    position: relative;
    top: 2px;
}

.topNav a:hover {
    text-decoration: none;
    background-color: #CFCDC6;
}
/* top menu */

/***************************************/

/* left menu */

.leftNav {
    float: left;
    width: 140px;
    background-color: #66969C;
    margin: 0 4px 0 0;
    padding: 0;
    height: 100%;
}

.leftNav ul {
    padding: 11px 0 0 0;
    margin: 0px;
    list-style-type: none;
    border: none;
}

.leftNav ul ul {
    padding: 0;
}

.leftNav li {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    border: none;
}
   
.leftNav ul li {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    border: none;

}

.leftNav li a {
    display: block;
    color: #B2CACD;
    /*border-bottom: 1px solid #737163;*/
    padding: 1px 5px 0 13px;
    text-decoration: none;
    width: 100%;
    width: 122px;
}

.leftNav li li a {
    display: block;
    text-decoration: none;
    padding: 0 0 0 31px;
    width: 100%;
    width: 92px;
}


.leftNav a:hover {
    text-decoration: none;
    color: #fff;
}

.leftNav li li {
    background-image: url(../Images/leftNav.gif);
    background-position: 23px;
    background-repeat: no-repeat;
}

.leftNav li.selected2 a {
    color: #fff;
}


/* left menu */

Strukturen er jeg skrev før er lidt forsimplet, men i store træk den samme.

Strukturen er konkret:
#outer
#innerTop
#innerBottom
  .leftNav
  .innerBottomCenter
  .innerBottomRight

hvor det er innerBottomCenter der bestemmer højden og det er height i leftnav jeg ønsker skal fyldes ud til det maksimale så dens background-color fylder det hele ud.

På forhånd tak.

Rasmus

Her er en step by step guide som kan give dig det du er ude efter:

http://www.webreference.com/authoring/style/sheets/layout/advanced

Så er det det bare at tilpasse step 8 efter dit behov: http://www.webreference.com/authoring/style/sheets/layout/advanced/step_08.html

Hmmmhh - omhandler det ikke kun width og så er det bruges der absolute værdier. Jeg kan ikke se height nævnt nogle steder. Ved ikke om det er mig der er lidt tung at arbejde med, men synes ikke jeg kan se nogen løsning der.

Nej det synes jeg ikke... Det var en ide til dit problem, men kunne jo også foreslå at du brugte en tabel...

Ja, det er også en mulighed, men når chefen siger nul tabeller til lay-out så må man føje ham. :-(

Har du et like til siden så vi kan se det i aktion??
Så har vi også koden, vi kan lege med, som gør det nemmere at lave den rigtige løsning første gang.

Jeg vil helst ikke lægge sitet op da det er for en kunde og der er kundespecifikke informationer på det.

Beklager, men det eneste html jeg har er "møjet" med alt-tags og diverse meta-data hvor kundens navn står på.

Kan du så lave et lille kort eks på en kode, hvor vi kan se problemet??

Fik hvis heller ikke skrevet det rigtigt i min første kommentar. height:100% skal på både "left" og "center".

Hej Fennec.

Jeg ahr lagt siden op her:

http://www.itu.dk/people/rlh/Accura/04_Kode/indexUnderside.htm

Det er menubaren i venstre side. Jeg gerne vil have til at flugte med indholdet i midten.

Rasmus

Problemet er at du ikke kan sige 100% af noget som du ikke kender højden på. For at kunne sætte noget til 100% så skal det omkransene elements højde være kendt og det er det ikke... Så derfor er du nødt til at sætte højden på html, body { height: 100%; } førend det skal give nogen mening. Og det er næppe det du er ude efter. Så som jeg ser det er din eneste løsning at måle højden via javascript på de to elementer som du ønsker skal være lige høje og synkronisere højden via javascript på elementet...

Hmhhhh og her troede jeg at alt var muligt med CSS. Jeg har overvejret en alternetiv løsning som var at sætte background-color på hele den nederste del til den grønne farve og så lave undtagelser med hvid i alle de div hvor det er relevant. Problememet er at min <outer> ikke folder sig helt ud og dermed laver en "rectangel", men "klapper" sammen omkring indholdet.

Som notes2c er inde på, er det fordi du ikke har angivet højden på parent elementerne:
.leftNav{
height:100%;
float:;
border:1px solid black;

}
.innerBottomCenter{
border:1px solid black;
height:100%;
}

#innerBottom{
border:1px solid black;
width:105%;
height:100%;
}

#outer{
height:100%;
}

body{height:100%;}

Men pga din top menu bliver siden for stor. Der kan laves et JS script som sætter højden, men så vil jeg til fortrække at smide layout ind i en tabel i stedet. Det virker 100% hver gang.

Og alt det med at man ikke må bruge tabeller til layouts, er noget bull. Det er et ? om at udnytte de egenskaber, der er i de enkelte HTML elementer. Selv E bruger en tabel til layout.

Hmmh - jeg kan næsten ikke tillade mig at lave hele siden om. Jeg har hat erfaring med javascript. Er der en venlig sjæl der kan/gider hjælpe mig med det?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.left {
background: lightgreen;
width: 200px;
float: left;
}
.center {
background: lightgrey;
width: 400px;
float: left;
}
.right {
background: lightblue;
width: 220px;
float: left;
}
-->
</style>
<script type="text/javascript">
<!--
var elms = ['innerLeft','innerCenter','innerRight'];

function synchronizeDivs(){
    var maxH = 0;//minimumshøjde
    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="synchronizeDivs()">
<div id="inner">
  <div id="innerLeft" class="left">Left (top)<br><br><br>Left (bund)</div>
  <div id="innerCenter" class="center">Center (top)<br><br><br><br><br><br><br><br>Center (bund)</div>
  <div id="innerRight" class="right">Right (top)<br><br><br><br><br>Right (bund)</div>
  <div style="clear: both;"></div>
</div>
</body>
</html>

Fandt svaret på eksperten...

roenving har lavet scriptet....

Tak for hjælpen til allesammen. Jeg tror at jeg anvender scriptet selvom det er meget mod min vilje.

Jeg piller sitet ned fra serveren igen.

Tja når tabellen ikke er en option, tror jeg ikke der nogen vej uden om....

Og fortsat god arbejds lyst...

Har lige et spørgsmål mere. Skal du tre div'er i javascriptet være angivet i selve html'en eller kan man godt angive det for et eksternt css?

Og er der en grund til at der både er angivte en class og et id på dine div'er. Kan man ikke bare nøjes med id?

Det er nok med id'en byggede bare videre på det jeg havde lavet, brugte class til style, men kunne lige så godt have brugt id selector. De elementer som skal synkroniseres skal hver have deres unique id i html'en og endvidere være i den javascript variabel ved navn elms.

Ok - det mente jeg også nok. Har fået det til at virke.

Endnu engang tak for hjælpen.

Fint...