iframe如何填满DIV？

去圣西罗-为尤文喝彩 2010-09-29 03:45:21 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css"> 

html,

body {height:100%;}

 

body {

    margin:0;

    padding:0;  

    background:#FFF;

    font:100%/1.3 arial,helvetica,sans-serif;

}

 

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/

body:before {/*Opera min-height 100% Fix*/

    content:"";

    height:100%;

    float:left;

    width:0;

    margin-top:-32767px;/*eliminate need for inner non clearing element*/

}

#wrap:after{ /* #wrap:after for IE8 min-height:100% Fix*/

    clear:both;

    content:"";

    display:block;

    height:1%;/*fix IE8 min-height:100% bug*/

    font-size:0;

}

 

/*===  Begin Main Structure ===*/

#wrap {

    min-width:800px;

    min-height:100%; /*height is determined from parent's height (html & body)*/

    margin:-100px auto 0;/*pull footer back into viewport with negative top margin*/      

    background:#FFF url(images/faux.jpg) repeat-y 0 0; /*images/faux.jpg is just a background color fill with the DIV #left*/ /

}

* html #wrap {height:100%;} /*IE6 treats height as min-height*/ 

 

/* demo typography */

h1 {

    margin:15px 15px 0;

    font-size:1.5em;

}

h2,p {

    margin:15px 15px 0;

    font-size:1.2em;

}

p {

    font-size:1em;

    text-align:justify;

}

.bold {font-weight:bold}

 

/* Begin Columns */

#main {

    float:right;

    width:100%;/*prevent shrinkwrapping*/

    margin-left:-250px;/*make room for left column to rise up*/

    padding-top:100px;/*soak up footer height*/

}

#content {

    margin-left:250px;/*push content away from left column*/

    padding:0 0 15px;

    overflow:hidden;/*contain child floats (and IE7 haslayout)*/

    border-bottom:1px dashed red;/*just to show float containment*/

}

* html #content {display:inline-block}/*IE6 haslayout*/

#left {

    float:left;

    width:250px;

    padding:100px 0 15px;/*100px to soak up footer height*/

}

#footer {

    min-width:800px;/*same as #wrap*/

    height:99px;

    overflow:hidden;

    background:#DDD;

    border-top:1px solid #000;

    clear:both

}

#footer p {

    margin:0;

    padding-top:10px;

    font-weight:bold;

    text-align:center;

}

</style>

 

</head>

<body>  

 

<div id="wrap">

    <div id="main">

        <div id="content">

            <iframe class="rt" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://ben10-gamecreator.cartoonnetwork.co.uk/#swf"></iframe>

        </div>

    </div>

    <div id="left">

        <h2>Left Heading</h2>

        <p>

            Lorem ipsum dolor sit amet consect ultrices Integer dis et Nunc. Pellent nec lorem mus 

            enim eu lorem aliquet pede nunc ligula. Vitae mattis vestibu et Vestibu Maecenas adipiscing 

            orci non consect pulvinar. Egestas libero ut tincidunt augue non neque elit lacinia sapien 

            Curabitur.

        </p> 

    </div>      

</div><!--End Wrap-->         

    

<div id="footer">

    <p>Sticky Footer Here</p>

</div>

 

</body>

</html>


如何使IFRAME填满div id="content"？
%或者有别的CSS代码，可以类似于这样，满足所有元素全屏overflow:hidden，#footer 高99px，宽100%，位于底部，#left宽250px，高100%-100px，#content 宽100%-250px,高100%-100px,内放一个iframe框架，iframe大小撑满整个#content。
...全文
2514 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
natici 2010-09-30
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用这个不行吗？
去圣西罗-为尤文喝彩 2010-09-30
  • 打赏
  • 举报
 回复
OK，不管它了，反正效果好就行了。
去圣西罗-为尤文喝彩 2010-09-30
  • 打赏
  • 举报
 回复
我用了下面的代码，可以显示正常，但是加了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">之后就会产生错误，DIV001被抬高到TOP外面去了，如何把代码写的标准化呢？
等待CSS高手...




<script type='text/javascript'>    function showDims() {        mydiv = document.getElementById('003');        alert(mydiv.scrollWidth+'x'+mydiv.scrollHeight);    }</script>

<body style="width:100%;height:100%;margin:0;padding:0;">

<div id="004" style="float:left;position:absolute;width:100%;height:200px;background:green;bottom:0px;margin:0;padding:0;">

	aaa

</div>

<div id="001" style="float:left;position:absolute;width:100%;height:100%;bottom:200px;margin:0;padding:200px 0 0 0;">

	<div id="002" style="float:left;width:200px;background-color:blue;height:100%;margin:0;padding:0;">

    	bbb

    </div>

    <div id="003" style="background-color:red;height:100%;margin-left:200px;margin:0;padding:0;">

    	ccc    

</div>

</div>

</body>

natici 2010-09-30
  • 打赏
  • 举报
 回复
区别就不清楚了。。。google一下吧
去圣西罗-为尤文喝彩 2010-09-30
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 natici 的回复:]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用这个不行吗？
[/Quote]
好神奇啊，谢谢你，分给你了。
弱弱的问一下，Transitional//EN"和Strict//EN"有什么区别吗？
效果居然完全不一样。
ajccom 2010-09-29
  • 打赏
  • 举报
 回复
做个table好了 iframe放在TD里面 100%就OK
青年庞 2010-09-29
  • 打赏
  • 举报
 回复
js动态取屏幕的宽度，之后在减掉250px
natici 2010-09-29
  • 打赏
  • 举报
 回复
只能用js实现，css应该实现不了100%-100px
去圣西罗-为尤文喝彩 2010-09-29
  • 打赏
  • 举报
 回复 


<script type='text/javascript'>    function showDims() {        mydiv = document.getElementById('003');        alert(mydiv.scrollWidth+'x'+mydiv.scrollHeight);    }</script>

<body style="width:100%;height:100%;margin:0;padding:0;"><div id="004" style="float:left;position:absolute;width:100%;height:200px;background:green;bottom:0px;margin:0;padding:0;">aaa</div><div id="001" style="float:left;position:absolute;width:100%;height:100%;bottom:200px;margin:0;padding:0;"><div id="002" style="float:left;width:200px;background-color:blue;height:100%;margin:0;padding:0;">bbb</div><div id="003" style="background-color:red;height:100%;margin-left:200px;margin:0;padding:0;"><iframe class="rt" width="100%" height="100%" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://ben10-gamecreator.cartoonnetwork.co.uk/#swf"></iframe></div></div></body>


JS是不是这样写的？
但是怎么让DIV001明显向上抬了200个像素，部分内容被遮盖掉了？margin:200px 0 0 0;top:200px;好像不行，脑子有点钝住了……
去圣西罗-为尤文喝彩 2010-09-29
  • 打赏
  • 举报
 回复
JS代码怎么写呢？

table不行啊，全都加了100%，还是没填满。
<div id="main">
<div id="content">
<table width="100%" height="100%">
<tr width="100%" height="100%">
<td width="100%" height="100%">
<iframe class="rt" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://ben10-gamecreator.cartoonnetwork.co.uk/#swf"></iframe>
</td>
</tr>
</table>
</div>
</div>
iframe自适应填满div_Vue textarea 高度自适应
本文介绍如何使用 Vue 实现 Textarea 控件的文字输入自适应高度功能，通过监测 scrollHeight 和 offsetHeight 的变化来动态调整 Textarea 的高度。
html网页iframe填满网页,html – 设置iframe以占用页面中的剩余空间
博客探讨了在Internet Explorer（特别是IE8）中，如何使iframe根据页面内容和固定工具栏动态调整高度的问题。作者尝试了CSS解决方案，包括设置html和body的高度为100%，以及使用绝对定位，但遇到了滚动条和高度计算不准确的问题。最后，虽然倾向于使用纯CSS解决，但作者也考虑使用JavaScript来动态获取并设置iframe的高度。提供的CSS代码片段展示了作者的努力，但在IE7中出现了水平滚动条的异常行为。
div包裹的iframe有5px的高度差问题
本文探讨了在HTML5中使用div包裹iframe时出现的高度偏差现象，详细解析了问题成因，涉及到HTML5文档类型声明的影响，并提供了两种有效的解决方案：通过调整iframe的vertical-align属性或设置display属性为block。
解决DIV层被Select覆盖的问题
本文介绍了一种解决IE浏览器中DIV层无法遮盖SELECT控件的方法，利用IFRAME提高层级，确保DIV正常显示而不影响用户体验。
iframe高度自适应
本文详细介绍了如何使用JavaScript和jQuery实现Iframe的高度自适应，包括同域和非同域情况下的解决方案。提供了多种代码示例，如通过获取iframe内部body的高度来动态调整iframe的高度。
CSS

61,122

社区成员

60,705

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章