iFrame 100% высоты вызывает вертикальную полосу прокрутки - PullRequest
Новая
       3

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

17 голосов
/ 03 февраля 2012

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

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

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

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

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

Ответы [ 5 ]

35 голосов
/ 03 февраля 2012

Полоса прокрутки создается не в iframe, а через пробел 

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

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

* { line-height: 0; }

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

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

2 голосов
/ 03 февраля 2012

Обновление:

рабочий пример в 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"/>
1 голос
/ 03 февраля 2012

Не вижу вертикальной полосы прокрутки за пределами 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

0 голосов
/ 13 июня 2012

Чтобы запретить полосу прокрутки, попробуйте это:

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 предотвращает рост sub div. .Vat необходим для IE и Firefox. Альтернатива для .vat: display: block. Или же дисплей: встроенный блок + вертикальное выравнивание: верх .brd для демонстрационных целей.

0 голосов
/ 12 июня 2012

Подведем итог:

  • Пустое пространство раньше вызывает 4px пустого пространства в правой части iframe.
  • пробел после csuses 4px пробел после iframe.

Это происходит из-за встроенного символа iframe, как указано в первом сообщении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...