固定NavBar裏面的iFrame

Question

我想創建一個固定的導航欄使用引導，當它自己的頁面工作正常，但是當我把這個頁面內的iframe，導航欄向下滾動頁面。下面的代碼來自bootstrap文檔。請注意，這在桌面上運行良好，但是當使用iPad或iPhone進行嘗試時，這是問題發生的地方。

NavBar.html

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="../navbar/">Default</a></li> 
     <li><a href="../navbar-static-top/">Static top</a></li> 
     <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

<div class="container"> 

    <!-- Main component for a primary marketing message or call to action --> 
    <div class="jumbotron"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 
    <p> 
     <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
    </p> 
    </div> 

     <div class="jumbotron"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 
    <p> 
     <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
    </p> 
    </div> 


     <div class="jumbotron"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 
    <p> 
     <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
    </p> 
    </div> 


     <div class="jumbotron"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 
    <p> 
     <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
    </p> 
    </div> 



     <div class="jumbotron"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 
    <p> 
     <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
    </p> 
    </div> 




     <div class="jumbotron"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 
    <p> 
     <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a> 
    </p> 
    </div> 

</div> <!-- /container --> 


<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="../../dist/js/bootstrap.min.js"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 

NavBarFrame.html

<body style="width:100%"><iframe src="NavBar.html"> </iframe></body> 

Answer 1

它的工作很適合我， 嘗試了這一點，希望這將解決您的問題。

添加類到iframe和CSS

.classname{ 
    height: 99%; 
    overflow: hidden; 
    width: 100%; 
}