Как избавиться от двойной полосы прокрутки при использовании iframe? - PullRequest
Новая
       29

Как избавиться от двойной полосы прокрутки при использовании iframe?

21 голосов
/ 03 мая 2010

Я видел эту проблему в Интернете, и все предложенные решения не работают для меня, поэтому я думал, что приду сюда.

У меня есть страница с фреймом. Верхняя часть страницы - это выпадающее меню, остальная часть страницы - это iframe. Идея, которая, как я уверен, есть у всех остальных, состоит в том, чтобы меню оставалось неизменным, а выбор меню запускает приложение в iframe. Содержимое iframe должно прокручиваться, а страница в целом не должна.

Я пытался поместить iframe width=height=100% внутри одного элемента таблицы также с помощью width=height=100%, но я получаю две полосы прокрутки, если сделать окно слишком коротким по вертикали.

Есть предложения?

Я думаю, что не объяснил себя хорошо. Я хочу сохранить полосу прокрутки в iframe как автоматическую, но мне никогда не нужна полоса прокрутки для всей страницы. Мне нужно, чтобы размер iframe соответствовал размеру, чтобы он всегда занимал ровно всю оставшуюся часть страницы, чтобы браузеру не приходилось создавать полосу прокрутки, потому что iframe никогда не должен выходить за нижнюю часть области просмотра.

Ответы [ 11 ]

15 голосов
/ 03 мая 2010

ОБНОВЛЕНИЕ:

ДЕМО: http://jsbin.com/ewomi3/3/edit

HTML 

<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
    <iframe src="http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>

CSS 

* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

Примечание: Я наконец понял, что вы хотите! Используйте тег table вместо тега div в качестве контейнера! Посмотрите демо и наслаждайтесь!

10 голосов
/ 03 мая 2010

установить переполнение CSS скрытым на любом кадре, из которого вы хотите убрать полосы прокрутки ... 

overflow:hidden
5 голосов
/ 05 февраля 2012

Я знаю, что это немного устарело, но вот что я сделал для своей страницы:

У меня была страница только с iFrame, и я хотел, чтобы она занимала всю страницу, поэтому я использовал 

<iframe style="height:100%;width:100%" src="..."></iframe>

После того, как я добавил соответствующее удаление отступов / полей / границ, у меня возникла проблема с двойной полосой прокрутки, которую вы описали. Используя функцию проверки Chrome, я обнаружил, что тело страницы примерно на 5 пикселей длиннее, чем iframe, поэтому я просто изменил код iframe: 

<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>

Это margin-bottom:-5px; исправило проблему для меня.

3 голосов
/ 17 июня 2014 
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body> 
<iframe height="100%" width="100%" src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>
3 голосов
/ 26 июня 2012

Для всех, у кого все еще есть проблема с двойной полосой прокрутки, все, что вам нужно сделать, это обернуть iframe элементом с переполнением: hidden, а затем добавить 100% высоты к html, body, iframe и оболочке. 1001 *

http://jsfiddle.net/KZ5wz/ (я не знаю, почему результат не отображается должным образом в JsFiddle, но он работает как чудо на моей машине)

2 голосов
/ 26 февраля 2015

Требования ясны:

  1. Над iframe расположена строка меню, из-за которой iframe, похоже, не в состоянии полностью прокрутить вниз до нижней части страницы в рамке.
  2. Полоса прокрутки окна должна быть скрыта, но не полоса прокрутки iframe.

Мое решение очень простое:

  1. Скрыть панель прокрутки окна с помощью overflow:hidden;.
  2. Укажите высоту iframe не как обычно 100%, а 100% минус высота меню и / или любой заголовок выше iframe. Я предполагаю, что меню / заголовок занимает 20% от общей высоты, но поскольку оно обычно будет иметь фиксированную высоту, возможно, лучше всего рассчитать его в CSS3 как height: calc ( 100% - 120px );. Обёрткой вокруг iframe может быть div или таблица шириной 100% и высотой 100%.

Вот мой пример с высотой iframe, установленной на 80% (окна):

стайлинг: 

body {
    overflow: hidden;
}
#hold_my_iframe {
    padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}

HTML: 

<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
    <iframe src="http:/example.com/my-iframed-page.php"
            width="100%" height="80%"
            marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>
1 голос
/ 15 мая 2014

Снять корпус {высота: 100%;}

0 голосов
/ 31 августа 2018

Если все содержимое вашей страницы является iFrame, вам нужно только добавить стиль: 

<style>
    body {
        overflow: hidden;
    }
</style>

В противном случае вы можете поместить его в стол или в погружение и просто нацелиться на этот элемент. Существует ответ выше, который имеет решение для таблицы.

0 голосов
/ 18 июня 2016

Я решил проблему с двойной полосой прокрутки путем динамического присвоения высоты iframe.

StackOverflow - динамическое изменение высоты iframe

0 голосов
/ 03 сентября 2013

Видя, что этот вопрос все еще остается без ответа, я решил добавить десять центов. Мне было интересно, играли ли вы с настройками display:block / display:inline. Не до конца понимая ваш вопрос, я не совсем уверен, как бы вы это сделали, но я думаю, что вы можете изменить iframe на отображение inline.

Страница:
...