динамически регулируемая высота div

Question

Привет, я ищу это: Динамически отрегулируйте высоту iframe , но для того, чтобы сделать это с div, у меня есть следующее:

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



<div class="boxFive">
<h3 class="tab">Latest News</h3>
<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">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>
                        <div class="ShortNews">
                            <a href="" class="NewsLink"></a>
                            <p>title for news article<a href="#" title="Click to read more">more...</a></p>
                        </div>

                    </div>
                </div>

но это, похоже, не работает, я что-то упустил?

Answer 1

поставить свой скрипт после NewsBlock div

Answer 2

Похоже, ваш Javascript работает просто отлично.Тем не менее, вы можете не видеть результаты, просто потому, что содержащий div #NewsBlock не обрезает свое содержимое.Попробуйте установить вашу CSS:

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

Это сработало для меня, проверьте это здесь: http://jsfiddle.net/zKnnQ/4/

Обратите внимание, что вы можете увидеть, как высота вашего контейнера div меняется, если вы откроетеконсоль webkit.

Answer 3

Попробуйте:

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");
}