Iframe, встроенный с высотой 100% в div, имеет странный нижний край

Я хочу обернуть элемент iframe height 100% и width 100% в div with fixed size.

Я пробовал вот так:

<div style="height: 410px; width: 480px; border: 1px solid black; overflow: auto;">
    <iframe src="" style="border: none; background: blue;" height="100%" width="100%"></iframe>
</div>

С более старыми doctypes он работает отлично, но как только я добавляю HTML-тип документа <!DOCTYPE html>, появляется тревожная полоса прокрутки, которая позволяет перемещать весь элемент iframe вверх и вниз внутри окружающего div и если вы прокручиваете полностью вниз есть странное пространство, я не могу объяснить.

Когда я удаляю свойство overflow: auto; из div-стиля, он тоже работает, но это не может быть решением.

Я не понимаю, почему это странное пространство/маржа ниже элемента iframe?

Вот демоверсию, которую вы можете попробовать самостоятельно: http://jsfiddle.net/tmuecksch/b5jgn/

Я попробовал его в Safari 7.0 и Firefox 23.0.1.

Ответ 1

Добавить display:block для вашего элемента iframe - без этого, он отображается как встроенное поле, и поэтому остается пространство для недостроек глифов, таких как g, p, f и т.д. (гипотетический) текст которые могут отображаться в одной строке.

Смотрите скрипту: http://jsfiddle.net/b5jgn/2/

(vertical-align:bottom для iframe также будет работать.)

Ответ 2

iframe { vertical-align:bottom; }

или

iframe { display:block; }

Ответ 3

Причина overflow:auto позволяет прокручивать div, если внутренний контент не подходит, и с высотой 100%, вызывающей конфликты двух стилей. Если бы они не теоретически, iframe мог продолжать расширяться.

Изменение overflow:auto до overflow:hidden или даже удаление overflow исправят эту проблему

Ответ 4

По-моему, лучше использовать новый атрибут seamless из HTML5. Вы можете прочитать об этом и других новых атрибутах здесь. Таким образом, ваш код будет выглядеть так: <iframe src="" class="" seamless="seamless" style="border: none; background: blue;" height="100%" width="100%"></iframe>. К сожалению, довольно большая проблема - поддержка браузера для этого атрибута. Однако браузеры, обновленные в 2013 году, должны функционировать. Позвольте мне теперь, если это сработает! Я тестирую его в Opera 15.0 и Chrome 29, и он работает.