网格中只有一列的滚动条

Question

我已经通过引导网格将页面分成两个相等的列。我想要第 1 列的滚动条，而不是整个页面的滚动条。在第 1 列中，我有图表的网格视图，在第 2 列布局中，我只有一个表。

我想知道如何单独为 column1 而不是为整个页面添加滚动条。

我面临的问题是我得到了整个页面的滚动条，尽管我给了 overflow:auto 到 column1 div

代码： html:

<div class="container-fluid">
<div class="row first-row">
    <!-- left column - plot area  -->
    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 column1" >
        <div class="btn-groups button-align">
                <button class="btn pull-right" onclick="listView()"><i class="fa fa-bars"></i> List</button> 
                <button class="btn pull-right active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
        </div>
           <div class="plot-area">
            <div class="container-fluid second-row">
                <div class="row">

css：

.second-row{
       overflow:auto;
    }
    .col-md-6.column1{ 
       background-color:black; 
       overflow-y: auto; 
        padding: 0 0 0 0;
    }

Answer 1

你需要设置最大高度来触发溢出，还要设置溢出来滚动。 这是一个编辑过的代码sn-p。

.second-row{
        overflow:auto;
     }
     .col-md-6.column1{ 
        max-height: 500px;
        background-color:black; 
        overflow: scroll; 
         padding: 0 0 0 0;
   }

Answer 2

如果百分比不起作用，您可以按如下方式使用“vh”：

.col-md-6.column1{ 
    max-height: 70vh;
    background-color:black; 
    overflow: auto; 
    padding: 0 0 0 0;

}

为了从页面的整个“正文”中删除滚动条，您需要在其中添加“overflow:hidden”，例如

body{
   overflow: hidden;
}