Question

我已按自举网格将页面分为相等的两列。.我想为第1列使用滚动条，而不是整个页面。.在第1列中，我有图形的网格视图，在第2列中，我只有一个网格视图桌子。

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

我面临的问题是，即使我对column1 div设置了overflow：auto，我仍然获得了整个页面的滚动条

代码： 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

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

.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;
}

滚动条仅显示网格中的一列

2 个答案: