Avatar billede casper_skovgaard Nybegynder
09. april 2008 - 14:04 Der er 4 kommentarer og
1 løsning

100% højde på absolute positionerede div'er

Jeg har nedenstående kode, som består af 2 div'er hvor positionen er sat til absolute.

Div1 har en fast højde som er højere en window højden, dvs. der skal scrolles for at se hele siden.

Div2 skal have samme højde som hele siden og i dette tilfælde samme højde som div1. Hvordan gør man det?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Height 100</title>
<style type="text/css">
html, body {
height:100%;
}

#div1 {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 1000px;
    width: 10px;
    background-color: red;
}

#div2 {
    position: absolute;
    left: 25px;
    top: 10px;
    height: 100%;
    width: 10px;
    background-color: blue;
}
</style>
</head>

<body>
<div id="div1">1</div>
<div id="div2">2</div>
</body>
</html>
Avatar billede olebole Juniormester
09. april 2008 - 21:25 #1
<ole>

Det er der ikke metoder til i CSS. Du kan skrive en lille, overskuelig kode, hvis du anvender en tabel. Hvis du ikke ønsker det, må du opbygge din side på en anden måde. Hvordan det skal gøres, afhænger af resten af sidens kode.
Én ting er dog sikkert: Du kan ikke som nu have margin i body- eller html-elementet, eller sætte top på det indre element, når du samtidig vil give det indre element 100% højde

/mvh
</bole>
Avatar billede roenving Novice
10. april 2008 - 02:57 #2
-- måske et synkroniseringsscript, der klarer det onload ?-)

<script type="text/javascript">
var elms = ['div1','div2'];

function synchronizeDivs(){
  var maxH = 0;//her kan du sætte et minimum !-)
  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';
  }
}
window.onload = function(){synchronizeDivs();};
</script>
Avatar billede casper_skovgaard Nybegynder
10. april 2008 - 15:53 #3
>> ole, tak for informationen, havde det lidt på fornemmelsen.

>> roenving, super cool ide, jeg har dog ændret lidt på scriptet da jeg godt kan have en div3 som starter længere nede på siden og udvider siden endnu mere. Det har jeg løst ved at bruge offsetHeight + offsetTop som højden. Tak for hjælpen og smid et svar

<script language="javascript" type="text/javascript">
var elms = ['div1','div2'];

function synchronizeDivs(){
  var maxH = 0;//her kan du sætte et minimum !-)
  for(i=0;elms.length>i;i++){
    var e = document.getElementById(elms[i]);
    maxH = Math.max(maxH,e.offsetHeight+e.offsetTop);
  }
  document.getElementById('div3').style.height=maxH + 'px';
}
window.onload = function(){synchronizeDivs();};
</script>
Avatar billede roenving Novice
11. april 2008 - 16:50 #4
Velbekomme '-)
Avatar billede roenving Novice
14. april 2008 - 13:00 #5
-- og tak for point ;~}
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