如何在iframe中制作固定的div

Question

我想在窗口底部制作一个float 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

我认为您可以将div与CSS放置在一起：

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

Answer 2

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

看到这个jsFiddle 。

我从这个SO问题中获取了尺寸样式。

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上制作的指南，您可以简单地将其应用于此问题。 不使用Java脚本保持简单，因为所有这些都可以由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;
}

在“原始内容”中 ，无论有多少内容 ，页脚都将保留在页面底部。 如果#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。

希望能有所帮助。 让我知道您是否有任何问题。