Удалить полосу прокрутки внутри iframe с полем
У меня есть такой HTML (index.html):
<html>
<head>
<style>
iframe {
height: 200px;
width: 200px;
border: 0;
}
</style>
</head>
<body>
<iframe src = "frame.html" marginheight = "0"></iframe>
</body>
</html>
И фрейм.html
<html>
<head>
<style>
body, html {
height: 100%;
background: #f88;
margin: 0;
box-sizing: border-box;
}
div {
margin-top: 50px;
background: #88f;
}
</style>
</head>
<body>
<div>content</div>
</body>
</html>
Пример https://plnkr.co/edit/mlnUS74jrEEsDACQ?preview
Комбинация высоты тела 100% и поля где-то внутри кадра приводит к появлению полосы прокрутки.
Содержимое фрейма находится в другом домене. Я не могу изменить HTML-код содержимого фрейма, но этот стиль соответствует обычной веб-странице.
Мне нужно удалить полосу прокрутки из рамки, но я не знаю как.
Отключение полосы прокрутки с помощью overflow:hidden на элементе, содержащем рамку, не является решением, поскольку полоса прокрутки все еще существует (прокрутка работает).
Здесь не так уж много вариантов, которые можно попробовать. Я пытался установить стиль iframe { height:auto }, но это не сработало.
Если решения нет, укажите надежный источник.
Upd: обратите внимание, что содержимое фрейма нельзя изменить. Полоса прокрутки находится внутри фрейма, и хотя переполнение, скрытое внутри фрейма, работает, это не ответ на мой вопрос.
Если вы хотите, чтобы iframe отслеживал размер содержимого, для этого в iframe требуется код JS.
Извините, пожалуйста, обратите внимание на детали вопроса.
Ответы 3
Понятно! Попробуйте это быстрое решение:
Добавьте в свой стиль iframe:
overflow: hidden;
Это должно убить эту надоедливую полосу прокрутки. Если это не сработает, позвоните нам, и мы придумаем еще!
@Anastasios3 имеет правильную идею, однако добавление этого кода в стиль iframe в index.html не сработает.
Однако вы можете добавить его в стильframe.html следующим образом:
<html>
<head>
<style>
body,
html {
height: 100%;
background: #f88;
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
div {
margin-top: 50px;
background: #88f;
}
</style>
</head>
<body>
<div>content</div>
</body>
</html>https://plnkr.co/edit/gmrez9PTLAjh8YLl?preview
Это гарантирует, что когда страница появится в iframe, она не переполнится.
Если вы просто хотите удалить полосы прокрутки из iframe и не беспокоиться об обрезании содержимого. Тогда это можно сделать только через атрибут HTML scrolling.
<iframe scrolling=“no”>
Технически это устарело более десяти лет назад, и многие валидаторы кода это отмечу. Однако в спецификацию никогда не добавлялся эквивалент CSS, и все браузеры полностью поддерживают атрибут scrolling.
Добавьте CSS
overflow: hiddenк родительскому элементу<iframe>(оберните вокруг него элемент уровня блока)