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或者您可以为包装器添加填充顶部，但这是您的选择。

请参阅此处的工作示例：https://jsfiddle.net/v7y9ghvz/4/

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

1 个答案: