栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

iframe身体内部高度100%,带填充

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

iframe身体内部高度100%,带填充

虽然您在CSS中不能说“高度:100%减去一些像素”,但可以将iframe设置为100%高,然后使用填充将其顶部向下推。然后,您可以利用CSS3的box-
sizing属性使填充物从高度中减去。

这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>    <title>test</title>    <style type="text/css">        html, body { margin: 0; padding: 0; height: 100%; }        #bar { height: 32px; background: red; }        iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding-top: 32px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;        }    </style></head><body>    <iframe src="http://www.google.com/"></iframe>    <div id="bar">foo</div><body></html>

适用于IE8,Moz,Op,Saf,Chrome。对于不支持框大小调整的浏览器(特别是IE
7以下版本),您必须继续使用Javascript后备广告来使多余的滚动条消失。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/615366.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号