элемента в IFRAME с высотой: 100% растяжимая

Я борюсь с этой проблемой:элемента в IFRAME с высотой: 100% растяжимая

У меня есть IFRAME, в котором я показываю веб-сайт, который имеет некоторую HTML структуру. И внутри этой структуры есть элемент, обладающий свойством css: height: 100%; Проблема в том, что элемент растягивается до полной высоты iframes, во всяком случае, я не должен думать. Не могли бы вы дать мне некоторое представление о том, как решить эту проблему?

Вот исходный код для содержимого IFrame:

<html> 
    <head> 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
     <link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" /> 
     <link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" /> 
     <link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" /> 
     <link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" /> 
    </head> 
    <body> 
     <div id="overview"> 
      <div class="overview slider swiper-container swiper-container-horizontal"> 
       <div class="swiper-wrapper"> 
        XXX 
       </div> 
      </div> 
     </div> 

     <div id="benefits"> 
      <div class="grid"> 
       <article id="article1" class="clearfix"> 
        <div class="text col right"> 
         <h2>People behavior in one picture</h2> 
        </div> 
       </article> 
      </div> 
     </div> 
    </body> 
</html>

Вот исходный код, где я поставил IFRAME:

<!DOCTYPE html> 
<html lang="cs" dir="ltr"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Titulek stránky</title> 
    </head> 
    <body> 
    <iframe src="iframe.html" width="1600" height="4000"></iframe> 
    </body> 
</html>

Большое спасибо вам помочь.

источник

2015-08-22 Jan Kožušník

На дочерней странице (страница внутри iframe) будет отображаться начиная с левого верхнего угла, поэтому размещение дочерней страницы обычно не требуется. Стиль элементов iframe на родительской странице определяет, какая часть детской страницы будет видна. Самый простой и эффективный способ - сделать iframe отзывчивым (способным адаптироваться к изменениям размеров экрана и/или окна)

<!DOCTYPE html> 
<html lang="cs" dir="ltr"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Titulek stránky</title> 
    </head> 
    <body> 
    <iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe> 
    </body> 
</html>

источник

2015-08-22 10:46:07 zer00ne

Я не уверен, вы точно знаете, что мне нужно делать. Размер iframes в порядке, проблема в том, что внутри iframe есть элемент: .swiper-wrapper, который имеет стиль: 'height: 100%;' и проблема в том, что этот элемент соответствует размеру iframe - например. если iframe имеет высоту 800 пикселей, то .swiper-wrapper также имеет высоту 800 пикселей. И мне нужно предотвратить это поведение. Элемент должен иметь 100% высоты родителей, а не всего окна .... –

В этом случае я вижу ту же разметку, но изменяю атрибут 'height' и' height' на iframe на любую желаемую высоту. Содержимое внутри iframe (дочерняя страница) должно соответствовать. Если ваш контент частично отключится, измените 'overflow' на' visible' – zer00ne

элемента в IFRAME с высотой: 100% растяжимая

ответ

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