Подтвердить что ты не робот

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

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

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

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

Любые предложения?

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

4b9b3361

ОТВЕТЫ

Ответ 1

ОБНОВЛЕНО:

DEMO: 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 как контейнер! Смотрите демо и наслаждайтесь!

Ответ 2

установить переполнение css для скрытия на любом кадре, который вы хотите удалить полоски прокрутки...

overflow:hidden

Ответ 3

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

У меня была страница с только 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; исправил проблему для меня.

Ответ 4

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

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

Ответ 5

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

Ответ 6

Удалить   тело {высота: 100%; }

Ответ 7

Ну, вопрос старый, но у меня была такая же проблема, и ни одна из ответов не решила мою проблему. Только с внутренними страницами (тот же домен) появились две вертикальные полосы прокрутки. Один для навигации по загруженной странице (правильный), а другой - немного для настройки высоты iframe-зоны (!)... С внешними исходными страницами она работает хорошо.

Как я исправил эту проблему, нужно было добавить класс в тело внутренней страницы для загрузки, например

<body class="internalPage">

и поместите следующее в мой файл CSS

body.internalPage{height: 99.5%;}

Я надеюсь, что это поможет кому-то в будущем.

Ответ 8

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

Ответ 9

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

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

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

  • Скрыть полосу прокрутки окна с помощью overflow:hidden;.
  • Дайте высоту iframe не обычную 100%, а 100% минус высоту меню и/или любой заголовок выше iframe. Я предполагаю, что заголовок menu/составляет 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>

Ответ 10

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

fooobar.com/info/42175/...