javascript - 网格中只有一列的滚动条

Question

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

我想知道如何为第 1 列而不是整个页面添加滚动条。

我面临的问题是我得到了整个页面的滚动条，尽管我将 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">

样式:

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

Answer 1

您需要设置最大高度来触发溢出，还需要设置溢出来滚动。 这是经过编辑的代码片段。

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