网页制作 
首页 > 网页制作 > 浏览文章

设置frameset的高度 界面变形的解决方法

(编辑:jimmy 日期: 2024/11/9 浏览:3 次 )
目前做了一个项目,界面如下:
设置frameset的高度 界面变形的解决方法
这是使用frameset做的,在宽屏下开发一直没有发现什么问题,直到一个用户使用800*600的机子测试的时候,才发现整个界面都被变形了。
那时整个frameset页面只有600像素高度,frameset嵌套的frame出现了滚动条,实在难看。怎么把frameset的高度设置高点,让其嵌套的frame页面没有滚动条,而让frameset有滚动条呢?

frameset的高度是设置不了的,比如:<frameset rows="110,*" style="height: 1900px;">。这时的页面还是屏幕的高度,并不是1900px;设置frameset的body的高度也无效。怎么办呢?我baidu了好多天,都没找到答案,这个问题就一直搁置着。也想到叫美工用DIV+CSS替换了frameset,但怕牵涉的内容太多,换的工作量也许很大,只好作罢。

灵感这东西真是怪,要来不来,来了挡也挡不住。就在这个问题放了一个来月后,今天它突然来了,来的时候还带着iframe。当我把frameset嵌套其中,并设置iframse页面的高度,效果果然出来了。现把解决方案与遇到相同问题而解决不了的同仁分享。

1、frameset页面(inner.html)

复制代码代码如下:
<html>
<frameset rows="110,*" frameborder="no" border="0" framespacing="-4px">
<frame src="/UploadFiles/2021-03-30/header.jsp"><frameset cols="170,12,*" framespacing="0" frameborder="no" border="0" id="mainFrameset">
<frame src="left.jsp"><frame src="narrow.jsp"><frame src=""></frameset>
</frameset>
<noframes>
</noframes>
</html>


2、iframe页面(outer.html)
关键是设置这个页面的高度,想要多高就设置多高,随你。这时里面包含的frameset也会是这个高度。

复制代码代码如下:
<body style="margin: 0px;height: 580px;width:960px;">
<iframe src="/UploadFiles/2021-03-30/inner.html">style="height:100%;width:100%;border-width: 0px;">
</iframe>
</body>
上一篇:meta viewport使网页在iPhone中满屏显示控制
下一篇:颜色16进制颜色代码表 显示和16进制数值对比显示方便查找
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。