動態調整格

您好我在找這個高度：Dynamically adjust an iframe's height但爲了能這樣做是爲了一個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>

，但似乎並不奏效，我錯過了什麼嗎？

來源

2011-12-06 Graham Barnes

嘗試：

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

來源

2011-12-06 17:58:36

把你的腳本之後NewsBlock格

來源

2011-12-06 18:04:16

我添加了CSS更改，並將js放在NewsBlock div後面但沒有更改，當我在http://jsfiddle.net/BWC27/上執行它時，它沒有按計劃工作，它的支持是相同的大小作爲內容文本分區的權利，所以他們都在同一個地方完成。我錯過了什麼嗎？ –

看起來像JavaScript是工作得很好。但是，您可能不會看到結果，僅僅是因爲包含div #NewsBlock未裁剪其內容。試試你的CSS設置爲：

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

這爲我工作，看看這裏：http://jsfiddle.net/zKnnQ/4/

需要注意的是，你可以看到，如果你打開一個WebKit的控制檯您的容器div的高度變化。

來源

2011-12-06 18:05:40

回答

相關問題