急！！100分求教div和iframe高度的自适应屏幕问题！！

咪咪猫 2012-03-26 10:39:05

想在页面布局3个层，黑色top-div置顶居中固定宽度900px，下面放置红色left-div与其左对齐，放置蓝色right-div与其右对齐。
红色left-div固定宽度300px固定高度400px。
蓝色right-div左紧邻红色left-div，右对齐黑色top-div，高度要能自适应屏幕的高度！！
在蓝色right-div中嵌入一个黄色iframe，大小要能充满蓝色right-div！！

以下为代码，哪位好心人帮帮忙，修改一下代码啦！！弄三天了没弄出来，好郁闷噢！！呜呜呜~~~

注：我现在用了一个container-div，把top-div、left-div、right-div装在里面，然后在body, html中设置text-align居中，以实现这4个层在屏幕上左右居中。现在就是无法让right-div和iframe的高度自适应屏幕，拜托各位前辈大虾啦！！


<html>

<head>

<title>四个div</title>

<style>

<!--

body, html{

	margin:0px;

	padding:0px;

	text-align:center;/*使得层居中*/

}

#container-div{ /*把top-div、left-div、right-div装在里面*/

	position: relative;

	margin: 0 auto;

	padding:0px;

	width:900px;/*层宽度固定为900px*/

	text-align: left;

}

#top-div{

	margin:0px;

	padding:0px;

	background-color: #000000;/*黑色*/

	height: 100px;

}



#left-div{

	float:left;

        width:300px;/*层宽度固定为300px*/

	padding-top:20px;

	padding-bottom:30px;

	margin:0px;

	height: 400px;/*层高度固定为400px*/

	background-color: #FF0000;/*红色*/

}



#right-div{

	float:right;

	width:600px;

	margin:0px;

	padding-top: 5px;

	padding-right: 0px;

	padding-bottom: 30px;

	padding-left: 0px;

	background-color: #0000FF;/*蓝色*/

}



-->

</style>

   </head>

<body> 

<div id="container-div">

	

   <div id="top-div"></div>

   <div id="left-div"></div>

   <div id="right-div"><iframe width=100% height=100% name=myiframe frameborder=3 src="xyz.html"  scrolling="auto"></iframe>

   </div>

	

</div>

</body>

</html>

...全文
643 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
B612灯夫 2014-06-26
  • 打赏
  • 举报
 回复
引用 5 楼 guzhiyang123 的回复:
高度最好不要给明确的值 改成100% 试下！
驾驶将width=100%，height=100%我试过了，可以的
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
什么xxpx啊？
冰镇宝贝321 2012-03-26
  • 打赏
  • 举报
 回复
那个xxPX 是不是要改成百分比 呢。。。。。你看看
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
补充一下示意图：
lzp4881 2012-03-26
  • 打赏
  • 举报
 回复
高度自适应最好用表格，DIV的自适应头痛。
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
结贴完毕，非常感谢zsx841021,大好银噢 :)
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
嗯，好神奇噢，正是我要的效果，太谢谢你了，zsx841021，我的大救星!
不过加入到我源文件好像有点小问题，我再研究下，不行再请教你噢！:)
三石-gary 2012-03-26
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>四个div</title>

    <style>

        html

        {

            height: 100%;

            margin: 0px;

            padding: 0px;

            text-align: center;

        }

        body

        {

            float: left;

            width: 100%;

            height: 100%;

            margin: 0px;

            padding: 0px;

            text-align: center;

        }

        

        #container-div

        {

            /*把top-div、left-div、right-div装在里面*/

            position: relative;

            margin: 0 auto;

            padding: 0px;

            width: 900px; /*层宽度固定为900px*/

            text-align: left;

             height: 100%;

              overflow:hidden;

            

        }

        #top-div

        {

            margin: 0px;

            padding: 0px;

            background-color: #000000; /*黑色*/

            height: 100px;

        }

        

        #left-div

        {

            float: left;

            width: 300px; /*层宽度固定为300px*/

            padding-top: 20px;

            padding-bottom: 30px;

            margin: 0px;

            height: 400px; /*层高度固定为400px*/

            background-color: #FF0000; /*红色*/

        }

        

        #right-div

        {

            float: right;

            width: 600px;

            margin: 0px;

            background-color: #0000FF; /*蓝色*/

            height: 100%;

            overflow:hidden;

        }

    </style>

</head>

<body>

    <div id="container-div">

        <div id="top-div">

        </div>

        <div id="left-div">

        </div>

        <div id="right-div">

            <iframe style="width: 100%; height: 100%;  margin: 5px;"

                name="myiframe" frameborder="3" src="xyz.html"></iframe>

        </div>

    </div>

</body>

</html>

试这个。。。
三石-gary 2012-03-26
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>四个div</title>

    <style>

        html

        {

            height: 100%;

            margin: 0px;

            padding: 0px;

            text-align: center;

        }

        body

        {

            float: left;

            width: 100%;

            height: 100%;

            margin: 0px;

            padding: 0px;

            text-align: center;

        }

        

        #container-div

        {

            /*把top-div、left-div、right-div装在里面*/

            position: relative;

            margin: 0 auto;

            padding: 0px;

            width: 900px; /*层宽度固定为900px*/

            text-align: left;

             height: 100%;

            

        }

        #top-div

        {

            margin: 0px;

            padding: 0px;

            background-color: #000000; /*黑色*/

            height: 100px;

        }

        

        #left-div

        {

            float: left;

            width: 300px; /*层宽度固定为300px*/

            padding-top: 20px;

            padding-bottom: 30px;

            margin: 0px;

            height: 400px; /*层高度固定为400px*/

            background-color: #FF0000; /*红色*/

        }

        

        #right-div

        {

            float: right;

            width: 600px;

            margin: 0px;

            background-color: #0000FF; /*蓝色*/

            height: 100%;

        }

    </style>

</head>

<body>

    <div id="container-div">

        <div id="top-div">

        </div>

        <div id="left-div">

        </div>

        <div id="right-div">

            <iframe style="width: 100%; height: 100%;  margin: 5px;"

                name="myiframe" frameborder="3" src="xyz.html"></iframe>

        </div>

    </div>

</body>

</html>

试试。。不知道是不是你要的效果
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
zsx841021 你在嘛
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
大好银....帮我改一下代码吧 :)
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
嗯 是啊
三石-gary 2012-03-26
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 mi_mi_mao 的回复:]

什么啊？
[/Quote]
我说你贴出来的示意图就是你要的结果吗？
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
什么啊？
三石-gary 2012-03-26
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 mi_mi_mao 的回复:]

没人会吗！！！！啊啊啊啊啊啊！！！救命啊！！！！！！
[/Quote]
上面图的效果就是你想要的效果吗？
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
没人会吗！！！！啊啊啊啊啊啊！！！救命啊！！！！！！
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
没有人会吗？？？？！！！！！
咪咪猫 2012-03-26
  • 打赏
  • 举报
 回复
试过了噢，不行
你不懂的黑 2012-03-26
  • 打赏
  • 举报
 回复
高度最好不要给明确的值 改成100% 试下！
数据处理救星降世Power Query
——拆（拆分） 4/ 天下大势，合久必分，分久必合。——合（合并） 5/ 隔空取物，犹如探囊取物——提（提取） 6/ 百转千回后的峰回路转。——转（转换） 7/ 它判断真假的唯一标准。——判（判断） 8/ 人以群分，...
html显示多个相同内容,css实现多个并排DIV自适应内容等高(相同高度)
他们的高度是不确定的，这个我知道可以用js实现，不过不想用，想求教一下css能不能解决这个问题。实现方法一：使用css Flexbox.row {display: flex; /* equal height of the children */}.col {flex: 1; /* ...
iOS UITableView+FDTemplateLayoutCell 配合AutoLayout分分钟教你实现类似微信朋友圈的动态高度自适应
UITableView里面的Cell固定高度那是基本不可能了，很多功能和界面都会涉及到高度自适应，而且电商类的尤其普遍，之前都是自己算啊算，代码写的非常多，逻辑还没写，光这布局UI和高度计算都能接近1000了，写完之后...
iOS开发-写给萌新们的UITableView的Cell高度自适应方法
Emmmm…. 时间过得好快，一晃眼一年就过去了，打开尘封已久的CSDN...上周在技术群里看萌新们在问UITableView的Cell怎么自适应宽高（xib和storyboard的我就不说了，关东升老哥的书里全都是），有装大佬的人就给他们...
!!!!高分求教ReadProcessMemory读取内存.有关内存偏移量的问题!
高分求教ReadProcessMemory读取内存.有关内存偏移量的问题! Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiBase/html/delphi_20061207125413246.html 已知一基地址$010EA0CC,偏移量为$2A4,先在用...
ASP

28,391

社区成员

357,060

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章