我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度,并在浏览器调整大小时自动调整大小。是否有可能不编写JavaScript代码,只使用CSS来完成?

我尝试在iframe上设置高度:100%,结果非常接近,但iframe试图填充整个页面高度,包括横幅div元素的30px高度,所以我得到了不必要的垂直滚动条。它并不完美。

我尝试了CSS的margin, padding属性在DIV上成功地占据了网页的整个剩余高度,但这个技巧在iframe上不起作用。

<身体> < div风格= "宽度:100%;高度:30 px;background - color: # cccccc;" > < / div >旗帜 <iframe src="http: //www.google.com.tw" style="width:100%;高度:100%;" > < / iframe > 身体< / >


当前回答

试试下面的方法:

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

这对我很有效

其他回答

没错,你所展示的iframe的高度是它的容器(body)的100%。

试试这个:

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

当然,将第二个div的高度更改为您想要的高度。

我是这么做的。我也遇到了同样的问题,最后花了几个小时在网上搜索资源。

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

我把这个添加到头部部分。

请注意,我的iframe位于一个有3行1列的表的中间单元格内。

类似的答案@MichAdel,但我使用JQuery和更优雅。

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id为iframe标签的ID

你可以用html/css这样做:

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

我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%,结果非常接近,但iframe试图填充整个页面”,好吧,什么时候“100%”不等于“整个”?

你已经要求iframe填充它的容器(也就是body)的整个高度,但不幸的是,它在<div>上面有一个块级别的兄弟,你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。

我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西,即height="*"。IIRC,这个不存在。

不幸的是,据我所知,也没有办法有效地混合/计算/减去绝对和相对单位,所以我认为你只有两个选择:

绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然,但也许是为了你 做不透明或对齐将 好的。 或者,您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要,你需要申请 这是div的子元素 代替。