如何滚动页面？

Question

当我运行下面的代码时，页面不滚动，并且不显示我的所有页面容器。首先我使用Ajax，但我的菜单没有工作。那么我不得不使用Iframe标签。但它也有问题。我试图发现问题，但我没有成功。任何人都可以帮我解决这个问题吗？

<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; "> 
     <table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl"> 
      <tr> 
       <td style="width: 90px; height: 30px;"><a href="#" style="font-family:Tahoma; color:#f6d434; font-size:13px; font-weight:bold; text-decoration:none;">صفحه اصلی</a></td> 
       <td style="width: 60px; height: 30px;"><a href="#" style="font-family:Tahoma; color:#f6d434; font-size:13px; font-weight:bold; text-decoration:none;">پروفایل</a></td> 
      </tr> 
     </table> 

     <div id="three" style="font-family: 'B Homa'; font-size: large;"> 
      <ol> 
       <li data-slide-name="slide-one"> 
        <h2> 
         <span>مدیریت مدیران</span></h2> 
        <div> 
         <img src="Lite%20Accordion/img-demo/1.jpg" alt="image" /> 
        </div> 
       </li> 
       <li data-slide-name="slide-two"> 
        <h2> 
         <span>مدیریت فرم ها</span></h2> 
        <div> 
         <img src="Lite%20Accordion/img-demo/2.jpg" alt="image" /> 
        </div> 
       </li> 
       <li data-slide-name="slide-three"> 
        <h2> 
         <span>مدیریت فرهنگی</span></h2> 
        <div> 
         <img src="Lite%20Accordion/img-demo/3.jpg" alt="image" /> 
        </div> 
       </li> 
       <li data-slide-name="slide-four"> 
        <h2> 
         <span>مدیریت آپلود سنتر</span></h2> 
        <div> 
         <img src="Lite%20Accordion/img-demo/4.jpg" alt="image" /> 
        </div> 
       </li> 
       <li data-slide-name="slide-five"> 
        <h2> 
         <span>مدیریت اخبار</span></h2> 
        <div> 
         <img src="Lite%20Accordion/img-demo/5.jpg" alt="image" /> 
        </div> 
       </li> 
      </ol> 
      <noscript> 
       <p> 
        Please enable JavaScript to get the full experience. 
       </p> 
      </noscript> 
     </div> 
     <div> 
      <ul class="menu"> 

       <li><a href="#"><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span></a> 
        <ul> 
         <li><a href="javascript:ChangeSrc('ActiveUser.aspx');">کاربران فعال</a></li> 
         <li><a href="javascript:ChangeSrc('UserBlock.aspx');">کاربران بلاک</a></li> 
         <li><a href="javascript:ChangeSrc('AllUser.aspx');">تمام کاربران</a></li> 
         <li><a href="javascript:ChangeSrc('#');">کاربران تایید نشده</a></li> 

        </ul> 
       </li> 

       <li><a href="#"><span class="l"></span><span class="r"></span> 
        <span class="t">مديريت آپلودسنتر</span></a> 
        <ul> 
         <li><a href="javascript:ChangeSrc('Add_type.aspx');">نمایه جدید</a></li> 
         <li><a href="javascript:ChangeSrc('Type_List.aspx');">لیست نمایه ها</a></li> 
         <li><a href="javascript:ChangeSrc('Cat_Add.aspx');">دسته بندی جدید</a></li> 
         <li><a href="javascript:ChangeSrc('CatList.aspx');">لیست دسته ها</a></li> 
         <li><a href="javascript:ChangeSrc('AddItem.aspx');">آیتم جدید</a></li> 
         <li><a href="javascript:ChangeSrc('ListItem.aspx');">لیست آیتم ها</a></li> 
        </ul> 
       </li> 
       </ul> 
     </div> 
     <div id="contentwrapper"> 
      <div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; "> 
       </div>--%> 
       <iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe> 
      </div> 
     </div> 
     <div id="stickybar" class="expstickybar"> 
     </div> 
     <div style="text-align: center; padding-top: 3px"> 
      <b>Copyright (c)</b> 
     </div> 
     <!-- LeftPanel Plugin --> 
     <div class="float"> 
      <div class="moduletable"> 
       <p> 
        &nbsp;<a href="#" target="_blank">برنامه امروز</a> 
       </p> 
      </div> 
     </div> 
     <script language="javascript" type="text/javascript"> 
      //$(document).ready(function() { 
      // $('#accordion').accordion(); 
      //}); 
      function ChangeSrc(trg) { 
       var frm = document.getElementById("frame"); 
       if (frm) { 
        frm.src = trg; 
       } 
      } 
     </script> 
     <script type="text/javascript"> 
      (function ($, d) { 
       $('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' }); 
      })(jQuery, document); 
     </script> 
    </div> 

Answer 1

请从maincontainer div中删除css属性position: fixed;。

正如你所看到的，我从你制作的at this sample示例html代码，我只是删除该属性。

您还可以使用css属性overflow:auto;来控制何时显示滚动条，或显示/隐藏div的有限区域之外的内容。