如何使滚动条在面板中显示并成功工作

本文关键字：显示 成功 工作 何使 滚动条 | 更新日期: 2023-09-27 18:06:51

我是asp的新手，我正试图理解为什么这不起作用。

我试图做的是在页面中设置一个面板，该面板将在页面上同时具有水平和垂直滚动条。页面设置如下:

一个头

一个面板:在这中间是大量的文字语句以及带有锚标记的标题以及返回到顶部锚标记，以及一些图像。

然后是页脚

这些都可以。

但是，当我在浏览器中打开页面时，面板没有出现滚动条。这将导致面板之间的语句只显示前1000px左右。此外，如果您单击页面顶部的锚标记之一，它将引导到面板的另一部分。这就是我想要它做的，然而，它将只显示该部分的开始，然后以某种方式溢出并覆盖页面的页脚。

<body style="background-color:#C9E8FF; overflow:hidden; width:100%; height:100%">
    <asp:Panel ID="Panel1" runat="server"  Width="100%" Height="100%"
    ScrollBars="Both" style="margin-right: 145px">

html/asp inbetween面板。

</asp:Panel>
</body>

我认为这个问题与高度声明的方式有关，然而，即使我给高度我需要的确切px值，或者只是不包括高度，我仍然有上述相同的问题。这是我正在使用的面板。

我想知道的是什么，是为什么这个面板不能正常工作的原因以及如何修复它。

如何使滚动条在面板中显示并成功工作

我将body和html元素的宽度和高度分别设置为100%，并将外边距设置为0。

我还包含了一些javascript来添加一些虚拟内容。

希望有帮助。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var html = ''
            for (i = 0; i < 100; i++) {
                html += 'Some default content...<br/>';
            }
            $('#content').html(html);
        });
    </script>
    <style>
        html, body
        {
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
            background-color:#C9E8FF;
        }
    </style>
</head>
<body>
    <asp:Panel ID="Panel1" runat="server"  Width="100%" Height="100%"
    ScrollBars="Both" style="margin-right: 145px">
        <div id="content"></div>
</asp:Panel>
</body>
</html>

我会将面板围在一个常规的div中，并将div的样式设置为overflow:scroll。

当面板的宽度超过div的宽度时，会自动为你创建滚动条。这里有一个小例子:

从CSS样式html、body中移除overflow:hidden

，因为这隐藏了页面上的溢出或滚动条。

问候,Ajay

相关文章：