PDA

Volledige versie bekijken : div css auto height

DragonTS
%Europe/Berlin %713 %2009, 18:07
hoihoi

ik heb een probleempje met de hoogtes van mijn div's

ik heb de volgende html opmaak:


<div id="div1">

*tekst blabla titels en shizzle*

<div id="div2">

*tekst blabla fotos enzo*

</div>

</div>


nu is het volgende

de div1 heeft een vaste hoogte (in mijn geval 660px) en ik wil dat div2 dynamisch meeschaalt TOT de bodem van div1.

op div1 heb ik de scrollbar verborgen overflow = hidden;
op div2 heb ik de scrollbar automatisch gezet overflow = auto;

overflow-x staat bij beide natuurlijk uit.

het punt is, omdat ik in div1 boven de div2 ook tekst heb staan lukt het me niet om div1 zo te laten schalen dat hij niet verder dan de bodem van div1 gaat.



height = 100%;
-> werkt niet



height = auto;
-> werkt niet



height = *vasteWaarde*
-> heeft geen zin want div2 word dynamisch gevuld, dus daar schiet ik niks mee op



iemand ideeën???

alvast bedankt!!
023-jimmy
%Europe/Berlin %524 %2009, 13:35
height: 660px;
overflow: auto;

Dan komt al je content gewoon in de div, maar zodra het hoger als 660px word, krijg je een scrollbar.

EDIT:
Ik zie nu pas dat je ook nog content boven div2 heb staan. Kan je die content niet in een div stoppen en deze ook een vaste hoogte geven?
DragonTS
%Europe/Berlin %895 %2009, 22:29
Dat zou geen verschil maken.

beide contents hebben dynamische inhoud.
dus de ene keer zou die div groter zijn dan de andere keer.

de content boven div2 wil ik niet laten scrollen.

Het kan dus zijn dat de content boven div2 5 regels text is, maar ook 10 regels.
en het is dus de bedoeling dat div2 automatisch mee schaalt met de totale grote van div1 (die wel een vaste hoogte heeft).

ik hoop dat het mogelijk is,
misschien een javascript oplossing??

wel bedankt voor je reactie :)
DragonTS
%Europe/Berlin %830 %2009, 20:55
Oke ik heb een mogelijke oplossing via javaScript gevonden, maar het wil nog niet lukken.

de CSS

#div_contentpadding {
padding: 0px;
padding-left: 10px;
width: 98%;
height: 660px;
max-height: 660px;
overflow:hidden;
overflow-x: hidden;
}
#div_contentheader {
height: auto;
width: 98%;
padding: 0px;
margin: 0px;
overflow: hidden;
overflow-x:hidden;
}

#div_contentscroll {
padding: 0px;
width: 98%;
height: auto;
margin-bottom: 0px;
overflow: auto;
overflow-x:hidden;
}




De JavaScript

var nContainHeight = this.document.getElementById("div_contentpadding").offsetHeight;
var nHeaderHeight = this.document.getElementById("div_contentheader").offsetHeight;
var nScrollHeight = (nContainHeight - nHeaderHeight);

this.document.getElementById("div_contentscroll").style.height = nScrollHeight;



De HTML

<div id="div_contentpadding" name="div_contentpadding">
<div id="div_contentheader" name="div_contentheader">
Titel
<hr>
Linkjes
</div>
<div id="div_contentscroll" name="div_contentscroll">
Pagina inhoud
</div>





Ik heb een test versie gemaakt die wel werkt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script type="text/javascript">
<!--
var hoogte;

function getHeight() {
hoogte = document.getElementById("test").offsetHeight;
alert(hoogte);
}
//-->
</script>

<div name="test" id="test" style="height: auto; width: 500px; border: solid 1px #000000" onclick="getHeight()">
whoooo<br />
yeah<br />
<hr /><br />
testjuh<br />
testjuh<br />
testjuh<br />
</div>

</body>
</html>




Kan iemand mij vertellen wat er hier aan het handje is?? Ik kom er gewoon niet uit :S

alvast bedankt!
DragonTS
%Europe/Berlin %842 %2009, 21:13
nvm! het is gelukt!! :D

voor degene die het interessant vinden:


function getHeight() {

var containHeight = document.getElementById('div_contentpadding').offs etHeight;
var headerHeight = document.getElementById('div_contentheader').offse tHeight;
var scrollHeight = (containHeight - headerHeight) - 20;

document.getElementById('div_contentscroll').style .height = scrollHeight+'px';

var scrolltest = document.getElementById('div_contentscroll').offse tHeight;

alert(containHeight);
alert(scrolltest);
}

window.onload = function() {
getHeight();
}


Ik was dus de +'px' vergeten ^^