iframe reaches bottom of page

2020-04-05 05:35发布

站内问答 / 前端开发
552 10 4

Is there a way to make the height of the <iframe> reach exactly the bottom of the page? It is hard to judge by using height:xx%, and it might be dependent on browser.

The code is below:

<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>

10条回答
啃猪蹄的小仙女
2楼-- · 2020-04-05 06:11

If your <p> tag content is fixed then you can try this way by adjusting the height of <p> and <iframe> relatively..and you have to keep <html> OR <body> tag height 100% otherwise it wont work

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
3楼-- · 2020-04-05 06:11

I have always used height:100vh; to give you 100% of the view port

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2020-04-05 06:14

Try this...

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body 
      { 
        height: 100%;
        margin:0px;
        padding:0px;    
      } 
    </style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>

You could check the demo here

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
5楼-- · 2020-04-05 06:15

Iframe which is a child to the body element is of 100% height with it's parent and before you can make iframe full page you have to declare the height of the body and make it full page too.

Try this. (I thought it would be better if you put your CSS in an external file or just inside the head)

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
6楼-- · 2020-04-05 06:18

I had this same problem recently. I believe you are wanting to expand the height to fit the content that is dynamically loaded. This works like a dream. :)

<!--This script will auto size the height.  Must set the id for it to work.-->      
<script type="text/javascript">
<!--//
 function sizeFrame() {
 var F = document.getElementById("myFrame");
 if(F.contentDocument) {
 F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
 } 
 else {
  F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
 }

 }

 window.onload=sizeFrame; 

//-->
</script>
查看更多
0人赞 添加讨论(0) 举报
淡お忘
7楼-- · 2020-04-05 06:27

Demo

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    html, body 
    { 
        height: 100%;
        margin:0px;
        padding:0px;    
    } 

    #divHeader
    {
        height:25px;

    }
    #divContent
    {   
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    height:100%;
    width:100%;
      margin-top:-25px;
    padding-top:25px;
    overflow:hidden;    
    }
    iframe
    {
        width:100%;
        height:100%;
    }
    </style>
    </head>
    <body>
    <div id="divHeader">
        header
    </div>
    <div id="divContent">
    <iframe src="http://www.weather.com"></iframe>
    </div>
    </body>
    </html>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)