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