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