我有一个iframe，其中包含以下html页面（带有包含全屏操作的轮播和导航栏）：
<!DOCTYPE html>
<html>
<head>
</head>
<body scroll="no" style="overflow-y:hidden;">
<div id="ds-widget-testslider" style="overflow-y:hidden;" class="container-fluid">
<!--
####################################################
C A R O U S E L
####################################################
-->
<div id="carousel" class="carousel slide " data-ride="carousel" data-interval="false" data-wrap="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" data-step="1">
<picture>
<source srcset="../../../img/big/1.jpg" media="(min-width: 1400px)"> <source srcset="../../../img/big/1.jpg" media="(min-width: 769px)"> <source srcset="../../../img/middle/1.jpg" media="(min-width: 400px)">
<img src="../../../img/big/1.jpg" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption"></div></div>
</div>
<a class="carousel-control-prev dy-prev" href="#carousel" role="button" data-slide="prev">
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next dy-next" href="#carousel" role="button" data-slide="next">
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span> -->
<span class="sr-only">Next</span>
</a>
</div>
<!--
####################################################
NAV BAR
####################################################
-->
<nav class="dy-navbar navbar navbar navbar-dark bg-dark">
<div class="d-flex order-0">
<a class="nav-link" href="#">
<i class='fas fa-download dy-icon'></i>
</a>
</div>
<div class="d-lfex justify-content-center order-1" id="collapsingNavbar">
<ul class="nav justify-content-center">
<li class="nav-item active">
<a class=" nav-link dy-prev" href="#carousel" role="button" data-slide="prev">
<i class="fas fa-arrow-left"></i>
</a>
</li>
<li class="nav-item">
<div class="goToSlideLabel text-center">
<span id="current-slide" class="j-current-slide align-middle"></span><span class="dy-line align-middle">/</span><span id="total-slides" class="j-total-slides align-middle"></span>
</div>
</li>
<li class="nav-item">
<a class="nav-link dy-next" href="#carousel" role="button" data-slide="next">
<i class="fas fa-arrow-right"></i>
</a>
</li>
</ul>
</div>
<div class="mt-1 text-right order-2 order-md-last" onclick="expand()">
<a class="nav-link" href="#" >
<i class='fas fa-expand dy-icon'></i>
</a>
</div>
</nav>
</div>
</body>
</html>
当我选择全屏操作时，展开方法将执行以下操作：
function expand() {
// check if fullscreen mode is available
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled) {
$('html').css ('height','100%');
$('body').css ('height','100%');
$('.container-fluid').css ('max-width','100%');
$('.container-fluid').css ('min-height','100%');
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}
容器是全屏的，但轮播和导航栏不适合页面大小。 有人可以帮助我了解我的错吗？