前端页面div float 后高度 height 自适应的问题

最近在画项目页面的时候遇到了一个左侧div一旦加上float：left 属性后，设置其高度height：100% 不起作用，后来网上查了半天也没有找到很好的解决方案，只在csdn里发现了这个马上记录下来以便后面用到时查阅，用js动态控制div的高度：

 <script type="text/javascript">
            document.getElementById("sidebar-oper").style.height = document.getElementById("sidebar").scrollHeight + "px"
 </script>

页面源代码如下：

 <div class="sidebar" id="sidebar">
         <div class="sideMenu">
             @Html.Action("Left")
             <div class="FunList">
                 <div class="title">功能菜单</div>
                 <div class="Contentlist">
                     <ul>
                         <li>
                             <i></i><a>仪器管理</a>
                         </li>
                         <li>
                             <i></i><a>我的申请</a>
                         </li>
                         <li>
                             <i></i><a>申请管理</a>
                         </li>
                         <li>
                             <i></i><a>合同管理</a>
                         </li>
                         <li>
                             <i></i><a>合同管理</a>
                         </li>
                     </ul>

                 </div>
             </div>
         </div>
         <div class="sidebar-oper" id="sidebar-oper">
             <div class="sidebar-up hide">
                 <img src="~/Content/Images/1仪器共享_09.jpg" style="cursor:pointer;" />
             </div>
             <div class="sidebar-down">
                 <img src="~/Content/Images/1仪器共享_09.jpg" style="cursor:pointer;" />
             </div>
         </div>
     </div>
     <script type="text/javascript">
             document.getElementById("sidebar-oper").style.height = document.getElementById("sidebar").scrollHeight + "px"
     </script>