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

从overflow: hidden;删除html, body，然后更新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;用于首先计划两个固定栏

FYI

如果您要为列使用相同的大小，则不需要包含所有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

你可以尝试使用内置工具的bootstraps来处理这类事情。对于顶栏，请使用navbar-fixed-top类，为侧板使用sidebar-nav。

将Overflow滚动到隐藏的一个

2 个答案: