Make Iframe to fit 100% of container's remaini

2019-01-03 07:26发布

站内问答 / HTML/CSS
1666 26 2

I want to design a web page with a banner and an iframe. I hope the iframe can fill all the remaining page height and be resized automatically as the browser is resizing. Is it possible to get it done without writing Javascript code, only with CSS?

I tried set height:100% on iframe, the result is quite close but the iframe tried to fill the whole page height, including the 30px height of banner div element, so I got unneccessary vertical scrollbar. It's not perfect.

Update Notes: Excuse me for not describing the question well, I tried CSS margin, padding attribute on DIV to occupy the whole remining height of a web page successfully, but the trick didn't work on iframe.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

Any idea is appreciated.

标签： html css iframe
举报
26条回答
干净又极端
2楼-- · 2019-01-03 08:13

It will work with below mentioned code

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
3楼-- · 2019-01-03 08:13

Why not do this (with minor adjustment for body padding/margins)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
查看更多
0人赞 添加讨论(0) 举报
劫难
4楼-- · 2019-01-03 08:14

try the following:

<iframe name="" src="" width="100%" style="height: 100em"/>

it worked for me

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
5楼-- · 2019-01-03 08:18

If you have access to the content of the iframe that will be loaded, you can tell its parent to resize whenever it resizes..

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

If you have more than one iframe on the page, you may need to use id's or other clever methods to enhance .find("iframe") so that you're selecting the correct one.

查看更多
0人赞 添加讨论(0) 举报
混吃等死
6楼-- · 2019-01-03 08:19

We use a JavaScript to solve this problem; here is the source.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

Note: ifm is the iframe ID

pageY() was created by John Resig (the author of jQuery)

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
7楼-- · 2019-01-03 08:19

MichAdel code works for me but I made some minor modification to get it work properly.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 5 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)