javascript - 如何在设置负上边距后让 iframe 填满整个移动网页-6ren

javascript - 如何在设置负上边距后让 iframe 填满整个移动网页

转载作者：太空宇宙更新时间：2023-11-04 03:12:49

我目前有一个 iframe 填满了我的整个页面，但我想给它一个 -40 像素的顶部边距以使其看起来更好。

iframe 位于移动页面上，宽度为 640 像素，高度为 100%。

我尝试这样做:height="calc(100% + 40px)" 但这似乎没有用，相反它给了我页面顶部一个小条的宽度.

但这本质上是我想要的，我想在将 iframe 提高 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>

最佳答案

你需要按照@APAD1 所说的去做，再加上将 40px 添加到你的 100% 高度。但是，这也会将您的滚动条向上移动 40 像素，并且最初可能会隐藏它。这是一个完整的全宽度/高度 iframe 解决方案，顶部为 -40px:

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

在这里 fiddle :http://jsfiddle.net/60xs8bro/

关于javascript - 如何在设置负上边距后让 iframe 填满整个移动网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29241970/