相对于另一个人而言，boostrap分区的大小

Question

我有右分区，其浏览器窗口大小（100vh）。

左分区由2个分区组成，这些分区可以具有可变大小但是所有组合在一起应该具有与左分区相同的大小。 滚动条的底部应始终位于浏览器窗口的底部，例如下面的示例：

我找不到如何设置左分区以匹配此模式。

这是一个小提琴：https://jsfiddle.net/bb61c412/67/

代码：

#left-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: white;
}

#right-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: gray;
}

#scroll{
   padding-right:0px; 
   padding-left:0px; 
   background-color:#FAFAFA;
   overflow-y:scroll;
   height:70vh;  
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class="col-sm-7" id='left-div'>

  <div style="background-color:#FAFAFA;width:100%;height:100%;">

    <div style="height:100px;background-color:white">
    </div>

    <div id="scroll">

      <p>
        "Sed ut...."
      </p>

    </div>

  </div>
</div>

<div class="col-sm-5" id='right-div'>
</div>



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

一种简单的方法是使用flex-boxes和align-self属性：

jsFiddle

#left-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: white;
}

#right-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: gray;
}

#scroll{
   
   padding-right:0px; 
   padding-left:0px; 
   background-color:#CCC;
   overflow-y:scroll;
   height:70vh; 
   align-self:flex-end; /* Flex-end to get your scroll down */
}

<div class="col-xs-7" id='left-div'>
  
  <!-- Setting the main container to display : flex -->
  <div style="display:flex;background-color:#FAFAFA;width:100%;height:100%;">

    <div style="height:100px;background-color:white">
    </div>

    <div id="scroll">

      <p>
        Lorem ipsum...
      </p>
    </div>

  </div>
</div>

<div class="col-xs-5" id='right-div'>
</div>

更新：

另一种解决方案是将容器的位置设置为relative，将滚动div设置为absolute。从那里，您可以通过将bottom属性设置为0来使滚动条粘到底部。

jsFiddle

#left-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: white;
}

#right-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: gray;
}

#scroll{
   
   padding-right:0px; 
   padding-left:0px; 
   background-color:#CCC;
   overflow-y:scroll;
   height:70vh; 
   width:100%;
   position:absolute;
   bottom :0;
}

.form-inline {
    display: inline-block;
    text-align: center;
}

<div class="col-xs-7" id='left-div'>
  
  <!-- Setting the main container's position to relative -->
  <div style="postion:relative;background-color:#FAFAFA;width:100%;height:100%;">
  

    <div style="height:100px;background-color:white">
        <form >
    <div class=form-inline style='text-align:center;'>
    <select name="Form1" class="form-control" >
                <option value="0">Form1</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>
    
    <select name="Form2" class="form-control" >
                <option value="0">Form2</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>
    
    <select name="Form3" class="form-control" >
                <option value="0">Form3</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>

    <button type="submit" class="btn btn-default">Submit</button>

    </div>  
    </form>
    </div>

    <div id="scroll">


    </div>

  </div>
</div>

<div class="col-xs-5" id='right-div'>
</div>