html - 自举师相对于另一个师的大小

Question

我有一个右分区，它具有浏览器窗口的大小 (100vh)。

left division 由 2 个大小可变的部分组成，但所有部分的大小应与左部分的大小相同。 滚动条的底部应该始终在浏览器窗口的底部结束，如下例所示:

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

这是一个 fiddle :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 使滚动 div 粘在底部。

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>