将按钮的位置固定在可滚动菜单Bootstrap 3的底部和内部

Question

我尝试定位：将两个按钮固定在Bootstrap 3中固定高度可滚动菜单的底部。 位置：固定时，可滚动性丢失，按钮落在菜单之外。是否可以将它整齐地固定在可滚动的菜单中，因此它始终可见但不是“侧滚动”的一部分（=参见概念图像）？

这是我的概念：它说的是“Übernehmen”;在那里，我想要我的APPLY + CLEAR按钮。

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.checkbox :hover {
      background-color:red;
      cursor:pointer;
  	  width:100%;
    }

.div_form :hover {
      background-color:green;
      cursor:pointer;
    }

.btn_clear {
    float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
  }
  
.btn_apply {
      float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
    }

.div_form {
    position:fixed;
    bottom:0px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-toolbar">
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-default" type="button">Brand</button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
                <input class="typeahead" placeholder="Search values" type="text">
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Alpha</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Beta
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Gamma</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Delta</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Omega</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Koppa
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
                  <span class="btn_clear"><input class="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Primary buttons with dropdown menu-->
        </div>
        <!--Success buttons with dropdown menu-->

Answer 1

我添加了一些额外元素并将其position: relative;及其子position:absolute;提供给父margin-bottom:70px;及其子bottom:-70px; 看看这个：https://jsfiddle.net/2v7wq5k0/3/