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

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

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

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

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

Для меня все так же, как в Chrome 15, IE9 и FF9.

источник

2012-02-03 Per Salbark

Это не IFrame, который производит скроллбар, это пробел после

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

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

* { line-height: 0; }

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

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

источник

2012-02-03 16:04:31 user123444555621

В Chrome, когда я щелкнул правой кнопкой мыши по белому пространству и выбрал ** Inspect Element **, элемент 'HTML' внутри' IFRAME' был выбран на вкладке ** Elements **. Я добавил скриншот к моему ответу. –

@davegrove Не уверен, что инспектор на нем точно на 100%. – user123444555621

Пробовал в двух других браузерах (Firefox и IE) и проверял блики одного и того же элемента. Дайте ему попробовать, что он выделяет для вас? –

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"/>

источник

2012-02-03 13:21:14 Bogdan

Спасибо, но это не совсем то, что я хочу. Может быть, я не понял в своем вопросе. Я хочу, чтобы iFrame занимал всю высоту видового экрана (и ширину, но это было легко). Ваше решение этого не делает. Я продолжу и отредактирую свой вопрос, чтобы другие не ошибались. –

Не работает в Firefox 9.0.1 здесь. –

k, я буду расследовать – Bogdan

не видя вертикальную полосу прокрутки вне из 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>

EDIT: Вот отрывок из-под Элементы вкладках, что получает выбран, когда я проверить Пробельные в Chrome.

Developer Tools Snip

источник

2012-02-03 13:25:46

Да, извините, что не достаточно ясно. Еще мой комментарий и мои изменения в вопросе. –

Ermm :-), я не уверен, почему это не соответствует законопроекту. Я изменил свой ответ, чтобы установить ширину и включить источник для iframe. «Iframe» сам заполняет весь порт представления, и в содержащем документе нет набора «переполнения». –

Я думаю, что пробел '5px', который вы видите, принадлежит документу, содержащемуся в' iframe'. Я могу подтвердить это, если вы щелкните правой кнопкой мыши пробел в Chrome и выберите ** Inspect Element **, который вы можете увидеть сами. –

Чтобы резюмировать:

белое пространство, прежде чем причины 4px белого пространства на Rigth из фрейма.
пробел после csuses 4px пробел после iframe.

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

источник

2012-06-12 08:53:59 Poisson

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

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. Или дисплей: встроенный блок + вертикальное выравнивание: верх .brd предназначен для демонстрационных целей.

источник

2012-06-13 16:36:26 poisson

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

ответ

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