如何让滚动条在面板中出现并成功运行？答案

【问题标题】：How to get a scrollbar to appear and work successfully in a panel?如何让滚动条在面板中出现并成功运行？
【发布时间】：2018-05-09 23:08:47
【问题描述】：

我对 asp 还很陌生，我正试图了解为什么这不起作用。

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

标题

面板：中间是大量的文字语句以及带有锚标签的标题以及返回顶部锚标签，以及一些图像。

然后是页脚。

所有这些都有效。

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

<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 在面板之间。

</asp:Panel>
</body>

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

我想知道的是，此面板无法正常工作的原因是什么以及如何修复它。

非常感谢任何帮助的建议。

【问题讨论】：

您不需要在面板上指定宽度。如果未定义宽度，则默认为 100%（就像 DIV，这就是面板的全部内容）。这实际上可能是您的问题的一部分。

标签： c# asp.net html

【解决方案1】：

我将 100% 的宽度和高度应用于 body 和 html 元素，并将边距设置为 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>

【讨论】：

【解决方案2】：

我会将面板包含在常规 div 中，并将 div 的样式设置为溢出：滚动。

当面板的宽度超过 div 的宽度时，它应该会自动为您创建滚动条。 See here a little example.

【讨论】：

【解决方案3】：

从 CSS 样式 html、body 中移除溢出：隐藏。

因为这会隐藏页面上的任何溢出或滚动条。

问候，阿杰

【讨论】：