{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 \"骚年 ilove 的问题《How to render a div 100% wide in Internet Explorer》','https://www.manongdao.com/q-935252.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a div in an iframe. The div is supposed to render at 100% width. Looking at the document not in an iframe, the div does indeed render at 100%. When in an iframe however, it renders at 90 - 95%. According to the MS developer tool the iframe, and indeed the body of the iframe document are both at 100%. It's just the div that is not. The HTML:
<iframe frameborder="0"
src="http://localhost:8080/pagedetails/73/true" id="su3-frame"
hspace="0" vspace="0"
leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0">
<html style="margin: 0pt; padding: 0pt;"
xmlns="http://www.w3.org/1999/xhtml">
<body marginwidth="0" marginheight="0" id="su3-body"
leftmargin="0" topmargin="0"
style="margin: 0pt; padding: 0pt;">
<div id="su3-header"
leftmargin="0" marginheight="0"
marginwidth="0" topmargin="0">
</body>
</html>
</iframe>
and the css for the frame and div:
iframe#su3-frame {
width: 100%;
height: 60px;
border: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0; left: 0;
z-index: 100000000;
}
div#su3-header {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #fff;
width: 100%;
height: 56px;
position: absolute;
padding: 0;
margin: 0;
line-height: 1;
top: 0; left: 0;
background: url('/images/bg-90.png');
border: 0;
border-bottom: 4px solid #aaa;
}
Any thoughts, suggestions much appreciated.
Inside your
iframe, you're free to specify whatever doctype you want; you can escape from Quirks Mode, and it won't affect the "parent page".In my test (which I'm not entirely sure matches your test case), changing the first two lines of my document included via
iframeto (for example) these :(that's the HTML5 doctype) puts the
iframedocument into Standards Mode, and fixes the issue.You're not trying to apply the parent's CSS to the iFrame, are you? You might be bumping up against the Same Origin Policy
Apply CSS to iframe
Do you NEED an iFrame? As a professional UI Developer I think I've had to use one 3 or 4 times in total over a 15 year career. Most of what people use iFrames for can be overcome with the Dom and Ajax these days. And, if you're trying to call an iframe out of the same domain, in theory you could just grab that content via includes.