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的有限区域之外的内容。

如何滚动页面？

1 个答案: