css - Bootstrap3 和 FlexBox，具有 100% 高度的 2 列 div，其中一列可滚动

Question

我想要一个 DIV 高度为 100% 且包含 2 个响应列的页面。右边的应该是固定的，没有滚动(作为菜单)。右边的应该是可滚动的，左栏独立。我正在使用 Bootstrap 3 使列响应

______________________________
|           |                |
|           |                |
|           |                |
|           |   y-scroll     |
|           |                |
| no scroll |                |
| vertical  |                |
| centering |                |
|           |                |
|           |                |
|           |                |
|           |                |
------------------------------

===更新======

这是我的第二次尝试:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div style="display:flex; height:100px; min-height:0; min-height: 100%; width:100%;">
    <div class="row">
         <!-- left -->
        <div class="col-md-2">
              <div style="flex-direction:column; background-color:red;   display:flex;  height:100%;  justify-content: center;">
               <h1 style="color:white;"> I should be fixed and centered</h1>
              </div>
        </div>
         

          <!-- right -->  
         <div class="col-md-10">       
          <div style="flex-direction:column;  flex:1; max-height:100%; overflow-y: scroll; background-color:green;">
            <h1  style="color:white; margin-bottom:600px;"> I should be > 100% height, and scrollable</h1>
              <h1  style="color:white; margin-bottom:600px;"> I should be > 100% height, and scrollable</h1>
          </div>
        </div>        
    </div>

</div>    

Answer 1

您完全可以不使用 Bootstrap 或 jQuery 而只使用 Flex 来实现您想要的大部分功能。

看看这段接近你需要的代码，希望它能帮助到你

<h2 class="text-center">2 responsive columns, 1 fixed 1 not</h2>
<div style="display:flex; height:100px; min-height:0; min-height: 100%">
  <!-- left -->
  <div style="flex-direction:column; background-color:red;">
   <h1 style="color:white;"> I should be fixed and centered</h1>
  </div>
  <div style="flex-direction:column;  flex:1; height: 400px; max-height:100%; overflow-y: scroll; background-color:green;">
    <h1  style="color:white;"> I should be > 100% height, and scrollable</h1>
  </div>
</div>