Установка iframe внутри div

Я пытаюсь установить iframe внутри div. Моя проблема в том, что я не могу заставить его вложить до 100% ширины div, мне нужно указать ширину пикселя iframe.Установка iframe внутри div

Я хотел бы, чтобы iframe был «внутри» div, так что если размер div уменьшен меньшим браузером, iframe также будет изменен.

Это мой код:

<div class="row-fluid"> 
    <div class="span9" id="standard"> 
     <div class="header-box"> 
     <p class="header" >Bla Bla Header</p> 
     </div> 
     <div id="wrap"> 
    <iframe id="frame" src="https://docs.google.com/a/...."frameborder="0"></iframe> 
     </div> 
     </div> 
(more things in the row) 
</div>

И CSS:

#wrap { width: 1130px; height: 100%; padding: 0; 
     overflow: hidden; position:relative;} 
#frame { width: 100%; height: 100%; 
     border: 1px solid black; position:relative; } 
#frame { 
zoom: 0.75; 
-moz-transform: scale(0.75); 
-moz-transform-origin: 0 0; 
-o-transform: scale(0.75); 
-o-transform-origin: 0 0; 
-webkit-transform: scale(0.75); 
-webkit-transform-origin: 0 0;

}

Ниже то, что happenswhen браузер изменен. enter image description here

источник

2013-06-17 Julia

Заканчивать ответы здесь: http://stackoverflow.com/questions/6634582/ how-to-resize-iframe-when-parent-window-resizes Проблема, скорее всего, потому, что вы определяете точную ширину размера для вашего 'wrap' div –

Дело в том, что я не хочу, чтобы мои divs имели фиксированные позиции. Причина, по которой я определяю точный размер для div div, заключается в том, что pdf идеально подходит внутри div, когда браузер является нормальным размером. На фотографии показано, что происходит, когда я уменьшаю размер браузера. – Julia

Основываясь на ссылке, предоставленной @better_use_mkstemp, вот скрипку, где вложенная IFrame изменяет размер, чтобы заполнить родительский DIV: http://jsfiddle.net/orlenko/HNyJS/

Html:

<div id="content"> 
    <iframe src="http://www.microsoft.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe> 
</div> 
<div id="block"></div> 
<div id="header"></div> 
<div id="footer"></div>

Соответствующие части CSS:

div#content { 
    position: fixed; 
    top: 80px; 
    left: 40px; 
    bottom: 25px; 
    min-width: 200px; 
    width: 40%; 
    background: black; 
} 

div#content iframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
}

источник

2013-06-17 17:59:55 orlenko

Будет ли это исправлять CSS?

iframe { 
    display:block; 
    width:100%; 
}

Из этого примера: http://jsfiddle.net/HNyJS/2/show/

источник

2013-06-17 18:20:46

О, это спасло мой сайт. Большое спасибо! – sunlover3

Отлично! Это должен быть принятый ответ @Julia – Chiwda

спасибо, работал в моем случае –

Я думаю, что, возможно, лучшее решение для имеющих полностью адаптивный IFRAME (а Vimeo видео в моем случае) встраивать на вашем сайте. Гнездо iframe в div. Дайте им следующие стили:

div { 
    width: 100%; 
    height: 0; 
    padding-bottom: 56%; /* Change this till it fits the dimensions of your video */ 
    position: relative; 
} 

div iframe { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
}

Просто сделал это сейчас для клиента, и это, кажется, работает: http://themilkrunsa.co.za/

источник

2017-01-15 10:17:41

Установка iframe внутри div

ответ

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