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