Высота iFrame 100% вызывает вертикальную полосу прокрутки

Я вижу много вопросов о iFrames высотой 100%, но никто, похоже, не имеет такой же проблемы, как и я.

Что я хочу сделать, так это иметь iFrame, который охватывает весь видовой экран, без полос прокрутки, без установки переполнения: скрытый на теле.

Я получаю нижний край 5px для моего iFrame, который не будет исчезать с помощью css, и это вызывает вертикальный scroolbar. Стандартный совет, похоже, заключается в том, чтобы установить переполнение: скрытое на теле, но это не реально решает проблему, и этого недостаточно для меня.

Здесь представлен супер простой пример jsFiddle. (обратите внимание на двойные вертикальные полосы прокрутки)

Такое поведение для Chrome 15, IE9 и FF9 одинаково для меня.

ОТВЕТЫ

Ответ 1

Это не iframe, создающий полосу прокрутки, пробел после нее

    <iframe src="http://www.bbc.co.uk" frameborder="0"></iframe>
    <!-- Whitespace here; This is being rendered! -->
</body>

Если вы не хотите его видеть, используйте

* { line-height: 0; }

edit: Оказывается, проблема остается, если вы удалите пробел, но решение одинаков. Iframe отображаются как встроенные элементы по умолчанию (iframe = 'inline frame') и, следовательно, имеют высоту строки, которая вызывает проблему.

В качестве альтернативы вы можете попробовать iframe { display: block; } или комбинацию обоих решений.

Ответ 2

Update:

рабочий пример в chrome 16.0.*, firefox 10.* (видимо, ie9 действует вверх и отображает полосу прокрутки в любом случае - либо отключен, если высота установлена ​​на 99%, либо активна, которая не может прокручиваться, если высота 100%):

поместите следующее в html файл и откройте его (не знаю, что jsfiddle делает по-другому, но он работает не так)

<style>
* {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /*overflow: auto;*/ /* not needed, this is the default value*/
}
</style>
<iframe src="http://www.bbc.co.uk" frameborder="0"/>

Ответ 3

Не видеть вертикальную полосу прокрутки вне jsFiddle с этим:

<html>
<head>
<style>
body {
    padding: 0;
    margin: 0;
}

iframe {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}
</style>
</head>
<body>
    <iframe src="http://www.bbc.co.uk" frameborder="0"/>
</body>
</html>

РЕДАКТИРОВАТЬ: Здесь находится фрагмент под вкладками Элементы того, что выбирается при проверке пробела в Chrome.

Developer Tools Snip

Ответ 4

Подводя итог этому:

  • пробел перед вызовом 4px пробела в буфере iframe.
  • пробел после csuses 4px пробела после iframe.

Это связано с встроенным символом iframe, как указано в первом сообщении.

Ответ 5

Чтобы предотвратить прокрутку, попробуйте следующее:

CSS

html, body  { height:100%; margin:0;}
.bdr    { border: thick solid grey }
.h100   { height:100%;}
.w100   { Width: 100% }
.bbox   { box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
        }
.vat    { font-size: 0; vertical-align:top}

HTML:

    <body class="bbox"><!-- no WS here--><iframe    
          class="bdr h100 w100 vat bbox" name="iframe1"
          src="http://www.bbc.co.uk"> </iframe><!--no WS here either--></body>

Стиль .bbox предотвращает рост подвыборок..Vat необходим для IE и Firefox. Альтернативой для .vat является: display: block. Или display: встроенный блок + вертикальное выравнивание: верх .brd предназначен для демонстрационных целей.