Latest"> Latest"> Latest" />

dynamisch aanpassen van de hoogte van div

Hi I am looking for this: Dynamically adjust an iframe's height but for it to do it to a div, i have the following thus far:

#NewsBlock {
height: 222px;
overflow-x: auto;
padding: 5px;
}



<div class="boxFive">

Latest News

<script type="text/javascript"> function resizeIframe() { var height = document.documentElement.clientHeight; height -= document.getElementById('NewsBlock').offsetTop; height -= 20; /* whatever you set your body bottom margin/padding to be */ document.getElementById('NewsBlock').style.height = height +"px"; }; document.getElementById('NewsBlock').onload = resizeIframe; window.onresize = resizeIframe; </script> <div id="NewsBlock"> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> <div class="ShortNews">

title for news articlemore...

</div> </div> </div>

maar het lijkt niet te werken, mis ik iets?

0

3 antwoord

Proberen:

function resizeIframe() {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  document.getElementById('NewsBlock').style.height = ((height - document.getElementById('NewsBlock').offsetTop) + "px");
}

0
toegevoegd

Het lijkt erop dat je JavaScript goed werkt. Mogelijk ziet u de resultaten echter niet, simpelweg omdat de bevattende div #NewsBlock de inhoud niet bijhoudt. Stel je CSS in op:

#NewsBlock {
   height: 222px;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 5px;
}

This worked for me, check it out here: http://jsfiddle.net/zKnnQ/4/

Merk op dat je de hoogte van je container-div kan veranderen als je een webkit-console opent.

0
toegevoegd

zet je script na NewsBlock div

0
toegevoegd
Ik voegde de CSS-wijziging toe en plaatste de JS na de NewsBlock div, maar zonder verandering, toen ik het deed op jsfiddle.net/ BWC27 het werkte niet zoals gepland, de ondersteuning is even groot als de inhoudstekst div rechts, zodat beide eindigen op dezelfde plaats. Mis ik iets?
toegevoegd de auteur Graham Barnes, de bron