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">
<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>
but it doesn't seem to be working, am i missing out something?
Try:
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"); }
将您的脚本放在NewsBlock div之后
Looks like your Javascript is working just fine. However, you may not be seeing the results, simply because the containing div #NewsBlock is not clipping its contents. Try setting your css to:
#NewsBlock {
height: 222px;
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
}
This worked for me, check it out here: http://jsfiddle.net/zKnnQ/4/
Note that you can see the height of your container div changing if you open up a webkit console.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.