Вот несколько способов создания полноразмерного iframe на веб-странице:
Метод 1: использование CSS
Вы можете создать iframe полной ширины и высоты, применив стили CSS к элементу iframe. Установите для свойств ширины и высоты значение 100 % и убедитесь, что размеры родительского контейнера iframe (например, элемента div) также установлены на 100 %. Вот пример:
<style>
html, body {
margin: 0;
padding: 0;
}
.iframe-container {
width: 100%;
height: 100vh;
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
<div class="iframe-container">
<iframe src="https://example.com"></iframe>
</div>
Метод 2: использование JavaScript
Вы также можете использовать JavaScript для динамического расчета и установки размеров iframe в соответствии с размером окна. Вот пример использования JavaScript:
<script>
function resizeIframe() {
var iframe = document.querySelector("#myIframe");
iframe.style.width = window.innerWidth + "px";
iframe.style.height = window.innerHeight + "px";
}
window.addEventListener("resize", resizeIframe);
</script>
<iframe id="myIframe" src="https://example.com"></iframe>
Обратите внимание, что оба метода предполагают, что содержимое iframe поддерживает отображение в полную ширину и высоту.