当html页面处于最底部位置时，如何显示整个所选元素？

Question

我正在使用ace-1.3-master模板工作项目并尝试安装按钮下拉列表，我将其放在HTML页面的最底层。

我的问题是按钮没有完全显示它的内容，用户需要手动滚动html页面才能看到整个按钮内容。如何在不滚动的情况下自动完成。

按钮位置

Answer 1

尝试使用位置：固定;在你的CSS按钮。 例如：

div#myDIV {
    position:fixed;
    width:100px;
    height:100px;
    background:red;
    left:10px;
    top:100px;
}

Answer 2

最后我找到了解决方案。 基于这个问题https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page

我做的是@ user5978325。 这是解决方案 我创建了一个包含此命令的函数

 $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

然后将其从我的按钮元素

绑定到第一级

我的代码看起来像这样

    <div class="btn-group">
      <button class="btn btn-white btn-primary"  >others</button>
        <button onclick="scrollToLowest()" data-toggle="dropdown"  class="btn btn-white btn-primary">
        <span class="ace-icon fa fa-caret-down icon-only"></span>
        </button>
     <ul class="dropdown-menu dropdown-success">
      <li>
        <a href="{{url('purchase_detail/download_pdf/'.$app_purchase_id)}}">Print Document PO</a>
        </li>
       <li>
      <a href="{{url('purchase_detail/send_po_to_email/'.$app_purchase_id)}}">Send PO To Email</a>
    </li>   
    <li class="divider"></li>
</ul>
</div>

<script>
   function scrollToLowest(){
     $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
   }
</script>

感谢。