前端页面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>

页面源代码如下：

 1 <div class="sidebar" id="sidebar">
 2         <div class="sideMenu">
 3             @Html.Action("Left")
 4             <div class="FunList">
 5                 <div class="title">功能菜单</div>
 6                 <div class="Contentlist">
 7                     <ul>
 8                         <li>
 9                             <i></i><a>仪器管理</a>
10                         </li>
11                         <li>
12                             <i></i><a>我的申请</a>
13                         </li>
14                         <li>
15                             <i></i><a>申请管理</a>
16                         </li>
17                         <li>
18                             <i></i><a>合同管理</a>
19                         </li>
20                         <li>
21                             <i></i><a>合同管理</a>
22                         </li>
23                     </ul>
24 
25                 </div>
26             </div>
27         </div>
28         <div class="sidebar-oper" id="sidebar-oper">
29             <div class="sidebar-up hide">
30                 <img src="~/Content/Images/1仪器共享_09.jpg" style="cursor:pointer;" />
31             </div>
32             <div class="sidebar-down">
33                 <img src="~/Content/Images/1仪器共享_09.jpg" style="cursor:pointer;" />
34             </div>
35         </div>
36     </div>
37     <script type="text/javascript">
38             document.getElementById("sidebar-oper").style.height = document.getElementById("sidebar").scrollHeight + "px"
39     </script>