在 html 元素上正确设置滚动条

Question

我有一个页眉和一个带有表单的边栏。当表单比屏幕大时，我希望在表单上有一个滚动条。

这里是 html 表格的内联样式：

<body>
<div id="wrap">
    <div id="header" class="navbar navbar-inverse navbar-fixed-top"></div>
    <div id="wrapper" class="toggled">
        <div id="sidebar-wrapper">
            <div id="sidebar-content">
                <form id="my-form" enctype="multipart/form-data" method="post" style="width: 235px; overflow-y: auto;height: 100%;position: absolute">
                    <label>Dropdown 1
                        <select id="select1"></select>
                    </label>
                    <label>
                        Dropdown 2
                        <select id="select2"></select>
                    </label>
                    <label>
                        Dropdown 3
                        <select id="select3"></select>
                    </label>
                    <label>
                        Dropdown 4
                        <select id="select4"></select>
                    </label>
                    <button class="btn btn-success btn-default">Submit</button>
                </form>

            </div>
            <a class="ToggleSidebar" href="#"></a>
        </div>
    </div>
    </div>

And here is JSfiddle with my approach so far.

问题是我的滚动条只有在我将上面的页面缩小到最后一个下拉列表的开头时才会出现并且变得无用，因为我无法到达按钮。我真的希望它在我缩小按钮上方并使其可滚动到整个按钮时立即出现。

Answer 1

删除边栏的 height:100% 并添加 top:60px, bottom:0px; 此外，您不需要为包装器固定另一个位置，您可以只添加顶部 60px 或为包装器添加一个 padding-top，但这是您的选择。

在此处查看工作示例：https://jsfiddle.net/v7y9ghvz/4/

在 html 元素上正确设置滚动条

Proper scrollbar setup on html element

html

css

scrollbar