it-swarm.com.ru

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

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

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

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

Какие-либо предложения?

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

20
stu

ОБНОВЛЕНО:

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

14
Luca Filosofi

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

overflow:hidden
10
Gabe

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

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

5
Liam Dawson

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

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

3
Heri Hehe Setiawan
<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
Fabio R Cardoso

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

  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>
2
Ian Onvlee

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

1
Irshad Khan

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

0
Cosine

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

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

<body class="internalPage">

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

body.internalPage{height: 99.5%;}

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

0
ricardoc

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

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

0
Jennifer Zhao