如何使一个iframe占用所有剩余房间

我有以下代码：如何使一个iframe占用所有剩余房间

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="shortcut icon" href="res/favicon.ico" /> 
<title>My website</title> 

<style type="text/css"> 
    .wrap { 
    position:relative; 
    margin:0 auto; 
    width:900px; 
    text-align:center; 
} 

#header, #footer { 
    width:100%; 
    float:left; 
} 

#footer { 
    position:fixed; 
    bottom:0; 
    z-index:999999; 
} 
</style> 

</head> 
<body> 
    <div id="header"> 
     <div class="wrap"> 
      <div class="logo"> 
       <h1>Header</h1> 
      </div> 
      <div>Menu goes here</div> 
     </div> 
</div> 

<iframe src="http://www.cnn.com"></iframe> 

    <div id="footer"> 
     <div class="wrap"> 
      <h2>Footer</h2> 
     </div> 
</div> 
</body> 
</html>

我如何设置的iframe，以便它会采取所有页眉和页脚之间剩余的宽度和高度？

来源

2012-10-05 Niv

看看我的回答，我需要使用一些JavaScript，但它完美:) – Develoger

解决它，需要一些javascript :)

活生生的例子：
~~http://simplestudio.rs/yard/framed/framed.html~~（离线）

CODE：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="shortcut icon" href="res/favicon.ico" /> 
<title>My website</title> 

<style type="text/css"> 

#framed { 

    position: relative; 
    width: 100%; 
    height: 100%; 

} 

.wrap { 
    position:relative; 
    margin:0 auto; 
    width:900px; 
    text-align:center; 
} 

#header, #footer { 
    width:100%; 
    float:left; 
} 

#footer { 
    position:fixed; 
    bottom:0; 
    z-index:999999; 
} 
</style> 

    <script> 

     var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500); 

     function chng_iframe_height(ifrid,hid,fid) { 

      var eheight = window.innerHeight; 
      var ifrobj = document.getElementById(ifrid); 
      var header = document.getElementById(hid); 
      var footer = document.getElementById(fid); 
      var header_height = getComputedStyle(header).height; 
      var footer_height = getComputedStyle(footer).height; 

      var reserved_height = parseInt(header_height) + parseInt(footer_height); 

      ifrobj.style.height = eheight - reserved_height +"px";  

     } 
    </script> 

</head> 
<body onload="chng_iframe_height('framed','header','footer');"> 
    <div id="header"> 
     <div class="wrap"> 
      <div class="logo"> 
       <h1>Header</h1> 
      </div> 
      <div>Menu goes here</div> 
     </div> 
</div> 

<iframe src="http://www.cnn.com" id="framed"></iframe> 

    <div id="footer"> 
     <div class="wrap"> 
      <h2>Footer</h2> 
     </div> 
</div> 
</body> 
</html>

Basicaly，我COM pute页眉和页脚呈现的高度，得到window.innerHeight和从那个数字我知道有多少px是在页脚之间留下了什么，所以我将该值分配给iframe和whoila它的作品...

此外，我已经设置setinterval每半秒调用一次这个函数，所以如果你调整窗口的大小，它几乎可以立即更新iframe的高度......

来源

2012-10-05 20:04:25 Develoger

它工作的很好:) 我想知道，为什么使用setInterval？ – Niv

因为如果仅在body onload上调用chng_iframe_height（），则根据窗口大小，只有1个适合该特定时刻的iframe高度。所以，如果因为某种原因窗口大小发生变化，您的iframe高度将保持原样，因此您的设计将会中断。我清楚了吗？ – Develoger

啊，现在我明白了:) 如果我说我不关心调整大小，它会简化代码吗？ – Niv

尝试添加类到iframe或风格它当场像这样：

<iframe style="height:100%; width:100%;" src="http://www.cnn.com"></iframe>

尝试，这也：

<iframe height="100%" width="100%" src="http://www.cnn.com"></iframe>

也不要忘记对去除填充/保证金身体标记，以便在页眉和页脚一路走下去：

body { 
    margin:0; 
    padding: 0; 
}

编辑：

如果这不起作用，您必须添加固定的宽度和高度。

来源

2012-10-05 19:52:29 dark4p

尝试两个方法导致相同的结果：该元素确实扩展到整个宽度，但仅限于154px高度。我没有看到为什么我应该添加正文的CSS代码，是不是默认完成？ – Niv

那么你可以尝试和测试，只是把一些div 100％的宽度，看看它去哪里。关于iframe：尝试将第一个示例中的高度规则更改为最小高度。你应该尝试'min-height'和'position'css规则。 Google他们。 – dark4p

我使用了.css（）和$（window）.height（）当你使用$（window） .height（），请确保您有DOCTYPE为HTML

<script> 
     var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500); 

     function chng_iframe_height(ifrid,hid,fid) { 

      var eheight = $(window).height(); 
      var ifrobj = document.getElementById(ifrid); 
      var header_height = $("#" + hid).css("height"); // getComputedStyle(header).height; 
      var footer_height = $("#" + fid).css("height"); 

      var reserved_height = parseInt(header_height) + parseInt(footer_height); 

      ifrobj.style.height = eheight - reserved_height +"px";  

     } 
    </script>

来源

2013-11-26 10:34:49

如何使一个iframe占用所有剩余房间

回答

相关问题