将溢出滚动到隐藏的

Question

我有一个卷轴溢出到一个隐藏的

问题是页面不会滚动，所以我可以看到其余内容，请注意我希望侧边栏和顶部栏固定在它们的位置，只有灰色的主体可以滚动

html,body{
    background-color: #f8f8f8;
    height: 100%;
    overflow: hidden;
}
/////////////////////////////////////////
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-    color: #e5e2e6; color:#000000; padding-top: 20px; overflow:scroll;">
                test1<br/><br/><br/><br/><br/>
                test2<br/><br/><br/><br/><br/>
                test3<br/><br/><br/><br/><br/>
                test4<br/><br/><br/><br/><br/>
                test5<br/><br/><br/><br/><br/>
                test6<br/><br/><br/><br/><br/>
            </div>

Answer 1

是你想要的吗？ See this fiddle

从 html, body 中删除 overflow: hidden;，然后像这样更新 HTML 代码：

HTML 代码已更新：

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body style="background-color: #e5e2e6;" >
    <div class="container-fluid" style="height:100%;">
        <div class="row" style="height:100%;" align="center">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar" style="height:100%; position: fixed; z-index: 10;">
                <p class="title" style="text-align:center; color:#FFFFFF; font-size:2.6vw;">TITLE</p>
    </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background-color: #3a3633; color:white; z-index: 10; margin-left: 25%; position: fixed; ">
                <span class="label label-default pull-left" style="font-size:15px; margin:1%;">TEST</span>
                </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: #e5e2e6; color:#000000; padding-top: 30px; padding-left: 25%; ">
                        test1<br/><br/><br/><br/><br/>
                        test2<br/><br/><br/><br/><br/>
                        test3<br/><br/><br/><br/><br/>
                        test4<br/><br/><br/><br/><br/>
                        test5<br/><br/><br/><br/><br/>
                        test6<br/><br/><br/><br/><br/>
                    </div>
                </div>

            </div>
        </div>
    </div>

我已将 position: fixed; 添加到您想要修复的元素中，并添加了一些填充以正确显示内容

我已经更改了灰色内容：

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: #e5e2e6; color:#000000; padding-top: 30px; padding-left: 25%; ">

padding-left: 25%; 因为左侧栏的宽度

padding-top: 30px; 因为顶栏的高度

顶栏：

<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background-color: #3a3633; color:white; z-index: 10; margin-left: 25%; position: fixed; ">

margin-left: 25%;是左边栏的宽度

左侧边栏：
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar" style="height:100%; position: fixed; z-index: 10;">

z-index和position: fixed;是用来放在第一个计划的两个固定杆

仅供参考

如果要对列使用相同的大小，则不需要包括所有 col-xs col-sm col-md 和 col-lg。例如仅包括 col-xs-3 将适用于所有 col-xs-3 col-sm-3 col-md-3 和 col-lg-3。 col-sm-9 将适用于 col-xs-9 col-sm-9 col-md-9 和 col-lg-9

Answer 2

您可以尝试使用内置工具的引导程序来处理此类事情。使用 class navbar-fixed-top 作为顶栏，使用 sidebar-nav 作为侧面板。

将溢出滚动到隐藏的

Scroll Overflow into a hidden one

html

css

overflow

twitter-bootstrap