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

Question

我尝试将两个按钮定位:固定到 Bootstrap 3 中固定高度的可滚动菜单的底部。 使用 position:fixed，可滚动性丢失，按钮位于菜单之外。是否可以将它整齐地固定在可滚动菜单中，使其始终可见但不是“侧滚动”的一部分(=参见概念图)？

这是我的概念:它写着“Ü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; 和它的 child position:absolute; 然后给父 margin-bottom:70px; 及其 child bottom:-70px; 看看这个:https://jsfiddle.net/2v7wq5k0/3/