作者nottt (无)
看板Web_Design
标题Re: [问题] iframe 的宽度设定
时间Fri Jun 30 08:42:30 2017
※ 引述《kisha024 (4545454554)》之铭言:
: 各位好
: 我本来是用 frameset + frame 譬如底下这样
: <frameset cols="25%,*">
: <frame src="Left.aspx">
: <frame src="Right.aspx">
: </frameset>
: MDN说frameset和frame已过时 要用iframe
: iframe的width如果设定成 % 或 vw XHTML5验证会不过 如下
: http://i.imgur.com/WqGNd3r.png
: 虽然iframe的width设成% 在多数浏览器还是可以正常显示
: 但总觉得这样做跟继续用frameset + frame 有什麽不同?
: 所以 想请问大家 iframe的width设定上 是不是有什麽技巧?
: 可以依内容 或 视窗宽度 之类的
: 谢谢大家
: ------------------------------------------------------------
: 一个iframe宽20% 另一个iframe宽80%
: http://i.imgur.com/Qjn9r4P.png
: 两个iframe未如预期一左一右 反而是一上一下 第二个iframe跑到下面了
: http://i.imgur.com/B5mensB.png
20% 80%宽的问题,应该是因为iframe之间有个微妙的距离
导致20+80+间距,跟100分的国防部长给国军的评价一样,超过100分
请看范例
https://codepen.io/not0000/pen/dRdzjP
我们可以看到第一段的两个iframe,我把宽度调成19.6、80,背景调成红色
有很明显的间距,不过应该不是常见的margin、padding、border造成的,
我一下子也找不出原因,请其他高手回答了
不过可以用另一种老方法解,把iframe设成float:left,用浮动方式排版就可以了
范例下半部的iframe就是用这种方法
关於排版方式,建议可以参考 学习 CSS 版面配置
想偷懒的话可以直接看float,但整篇也没多长,有时间还是从头看一次吧
http://zh-tw.learnlayout.com/float-layout.html
另外你使用的是.aspx,在webform中有一个masterpage的东西,更适合用来制作网站外框
用iframe会有两个隐形外框导致无法全选,masterpage不会有这问题
如果想针对整个架构调整或是打掉重来的话,建议改走asp.net MVC吧
微软对webform的支援不知道还能活几年,现在这个时间点学webform感觉不太长久
而且MVC架构还有像jsfiddle之类能在线上写的耶,好MVC不用吗
https://dotnetfiddle.net/
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 218.187.82.171
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1498783355.A.D4A.html
1F:推 kisha024: 谢谢 您的回答对我帮助很大 07/01 18:06