Загрузка iframe в середине страницы, а не вверху страницы

Я внедряю wetransfer через iframe на веб-сайт, но проблема, с которой я столкнулась, когда загружается страница, автоматически перескакивает за заголовок сайта, а не с новой загрузкой страницы в верхней части страницы.Загрузка iframe в середине страницы, а не вверху страницы

Как я могу остановить это? Я пробовал использовать jquery scrollto, но не имеет никакого значения.

https://jsfiddle.net/dbruning22/c0s6mhkv/1/

HTML

<header> 
    Some Header information and navigation 
</header> 
<body> 
    <iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe> 
</body>

CSS

header { 
    background: green; 
    height: 600px; 
}

источник

2016-04-21 Bonzai

Высота заголовка 600px так IFrame находится прямо позади.

Если вы хотите IFrame, чтобы покрыть страницу с вершины вы должны установить

iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
}

fiddle

Если вы хотите разместить IFRAME прямо позади заголовка, просто удалите

height: 600px;

fiddle 2

источник

2016-04-21 09:08:13 pumpkinzzz

Используйте это

header { 
    background: green; 
    height: 600px; 
    position:absolute; 
    left:0; 
    top:0; 
}

источник

2016-04-21 09:08:13

Зеленый заголовок высотой 600 пикселей из-за вашего CSS. При необходимости отрегулируйте значение height:.

Кроме того, <header> является обычным тегом содержимого страницы и поэтому должен быть размещен внутри <body>, а не перед ним.

источник

2016-04-21 09:19:46

Первый: положить header бирка внутри тег бирка. Не снаружи.

<body> 
 
<header> 
 
    Some Header information and navigation 
 
</header> 
 
    <iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe> 
 
</body>

Второе: Удалить 600px высоту от заголовка CSS.

Profit :)

источник

2016-04-21 09:19:59

Заголовок вне тега body был опечаткой, но не повлиял бы на то, как генерируется iframe. Высота заголовка устанавливается на высоту экрана пользователя, а в нем есть большое фоновое изображение, логотипы и анимация. Я просто добавил фиксированную высоту 600 пикселей, чтобы проиллюстрировать точку, когда он загружается до середины экрана. – Bonzai

использовать следующий код:

<header> 
    Some Header information and navigation 
</header> 
<body> 
<div> 
    <iframe src="#" width="100%" height="400" id="iFrm"></iframe> 
</div> 
</body> 

<script type="text/javascript"> 
    var body = document.body, 
    html = document.documentElement; 

var documentHeight = Math.max(body.scrollHeight, body.offsetHeight, 
         html.clientHeight, html.scrollHeight, html.offsetHeight); 


    var iframeHeight = parseInt(document.getElementById("iFrm").getAttribute("height")) 


    document.getElementById("iFrm").style.marginTop = (documentHeight - iframeHeight)/2; 
</script>

Его работает нормально для меня. Надеюсь работает для вас

источник

2016-04-21 09:31:34

Не совсем уверен, если вы хотите, чтобы это было так, но попробовать его

<header> 
    Some Header information and navigation 
</header> 
<body> 
    <iframe class="test" src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe> 
</body>

CSS:

header { 
    background: green; 
    height: 600px; 
} 
.test { 
    position: fixed; 
    top: 0; 
    z-index: 1; 
}

Но вы могли бы использовать angularjs modal_dialogue сделать всплывающее которое отображает вашу информацию из URL-адреса.

источник

2016-04-21 09:35:38 Frutis

Загрузка iframe в середине страницы, а не вверху страницы

ответ

Смежные вопросы