Принуждение родительского div (таблицы) к максимальной ширине

Question

Следующий фрагмент представляет соответствующие части веб-страницы.

<div id="a" style="min-width: 300px; max-width: 800px; display: table"> 
    <!-- Placeholder --> 
    <iframe style="width: 100%"> 
    </iframe> 
<div> 

Родительский div имеет адаптивную компоновку. Мы не знаем о конкретном значении max-width, и мы можем только изменить placeholder или iframe. Мы не можем изменить обертку.

С помощью этой установки iframe будет иметь ширину 300 пикселей. Если бы мы заполнили заполнитель достаточным текстом, то размер iframe был бы шириной 800 пикселей.

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

Answer 1

С вашей оберткой div является display: table элементом, вы должны сделать как iframe и Заполнителя быть display: table-row.

Это соответствовало бы их ширине.

Answer 2

Использование позиция absolute для iframe и relative для родителей:

<div id="a" "> 
    <!-- Placeholder --> 
    <iframe></iframe> 
<div> 

#a { 
    position:relative; 
    max-width:800px; 
    min-width:300px; 
} 
#a iframe { 
    position: absolute; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Updated JsFiddle Example

Answer 3

Вашего обертывание DIV не имеет фактическую ширину, так что если вы установите его в 100% было бы адаптироваться к ширину экрана и не будет перекрывать или превышать min-width и max-width.

#a { 
    min-width: 300px; 
    max-width: 800px; 
    display: table; 
    width: 100%; 
} 

Example

Answer 4

Родитель ширина может быть на 100% (с использованием минимальную/максимальную ширину тоже), а IFrame будет просто наследовать. Я использую границы, чтобы показать, как iframe подходит родителям.

<div id="a" style="min-width: 300px; width: 100%; max-width: 800px; border: 1px solid red;"> 
    <!-- Placeholder --> 
    <iframe style="width: inherit; border: 1px solid blue;"> 
    </iframe> 
<div>