Как сделать фиксированный div внутри iframe

Question

Я хочу сделать плавающий div внизу окна. Она работает нормально, как показано здесь https://fiddle.jshell.net/8ghsm1La/light/

вопрос я получаю, когда я устанавливаю, что HTML внутри фрейма. Липкий 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

Проблема заключается в том, что ребенок 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 2

Я думаю, вы могли бы поместить DIV с CSS:

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

Answer 3

Вы можете использовать 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 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 включают() или функциональные возможности AJAX в JavaScript для загрузки контента, а не пытаться применять CSS в нескольких местах.

Надеюсь, что эта помощь. сообщите мне, если у вас есть какие-либо проблемы.