设置负上边距后如何让iframe填充整个移动网页

Question

我目前有一个iframe填充了我的整个页面，但我想给它一个-40px的上边距，以使其看起来更好。

iframe位于移动页面上，宽度为640px，高度为100％。

我尝试这样做： height="calc(100% + 40px)"但这似乎没有用，相反，它使我在页面顶部的小条形宽度得以显示。

但这本质上就是我想要的，我想在将页面扩大到40px之后将其内嵌到页面底部。

请有人在这里保存我的一天哈哈！

码：

<html>
<meta content='width=350px, user-scalable=0' name='viewport' />
<body style="margin: 0; height: 100%;">
<iframe style='margin-top: -40px;'
  src="URLHERE"
  frameborder="0"
  width="350px"
  height="100%">
</frameset>
</body>
</html>
</iframe>

Answer 1

您需要执行@ APAD1所说的操作，再加上40px到100％的高度。 但是，这也会将滚动条也向上移动40px，并可能最初将其隐藏。 这是一个完整的全角/全角iframe解决方案，顶部为-40px：

html, body
{
   height: 100%;
   overflow: hidden;
}
   .iframe
{
   position:absolute;
   top:-40px;
   left:0;
   width:100%;
   height:calc(100% + 40px);
}

在这里提琴： http : //jsfiddle.net/60xs8bro/

设置负上边距后如何让iframe填充整个移动网页

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-03-24 20:29:26

设置负上边距后如何让iframe填充整个移动网页

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-03-24 20:29:26

解决方案1
2 已采纳 2015-03-24 20:29:26