如何在iframe中制作一个固定的div

Question

我想在窗口底部制作一个浮点div。它运行正常，如https://fiddle.jshell.net/8ghsm1La/light/

所示

我得到的问题是当我将html放在iframe中时。粘性div来自iframe的底部。在这种情况下，我希望它位于我的屏幕底部，而不管iframe滚动的位置 https://jsfiddle.net/x1p4bf7j/

<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/" style="width: 1310px; height: 582px; overflow: hidden;" />

即我希望固定粘性div位于容器页面的底部。

Answer 1

我认为你可以用css放置div：

#iframe {
  position: fixed;
  width: 100%;
  height: 30px;
  margin: 0px !important;
  background-color: yellow;
  bottom: 0px;
  z-index: 1000;
}

Answer 2

您可以使用css使iframe与您的身体一样大，然后粘性页脚将按预期工作。

见jsFiddle。

我从这个SO question中获取了大小样式。

CSS：

body {
    margin:0px;
    padding:0px;
    overflow:hidden
}

#if1 {
    overflow:hidden;
    overflow-x:hidden;
    overflow y:hidden;
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    height: 100%; 
    width: 100%;
}

Answer 3

需要注意的是，子iframe和父iframe必须来自同一个域。 你需要一些JavaScript。我创造了一个工作小提琴。

https://fiddle.jshell.net/zmr0m5qv/

var newNode = document.createElement('div');  
newNode.style.bottom = 0;
newNode.style.height ="25px";
newNode.style.left = 0;
newNode.style.position = "fixed";
newNode.style.right = 0;
newNode.style["z-index"] = 100;
newNode.style["background-color"] = "yellow";
newNode.innerHTML = "sticky Text";
parent.document.body.appendChild( newNode );

Answer 4

按照我在CodePen上提供的指南，您可以简单地将其应用于此问题。不使用Javascript来保持这个简单，因为它可以全部由CSS处理。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
.footer {
    height: 40px;
}
.push {
    height: 80px;
}

在The original content中，无论有多少内容，页脚都会保留在页面底部。这适用于#content中没有足够的内容使.sticky元素适合底部。

现在要在iFrame页面上应用它，你只需要包含CSS来定位iFrame全高。如下所示：http://fiddle.jshell.net/8ghsm1La/4。

html, body, iframe {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    border: 0;
    margin: 0;
}

不完全确定iFrame服务器的目的是什么，我建议使用PHP include（）或JavaScript的AJAX功能来加载内容，而不是尝试在多个地方应用CSS。

希望这有帮助。如果您有任何问题，请告诉我。