css控制元素高度自适应
可以采用元素定位 + padding 的方式使特定元素高度自适应。
css 样式:
html,body{ height:100%; margin:0; padding:0; } .wrap { height:100%; box-sizing: border-box ; position: relative; padding: 60px 0 0; } .header { height: 60px; position: absolute; top: 0; width: 100%; } .content { height:100%; }
html:
<div class="wrap"> <div class="header"> 我是头部信息 </div> <div class="content"> 我要高度自适应 </div> </div>
效果如下:
注:如果需要使用底部,只需在底部加上对应定位元素然后用父级元素的padding进行控制即可。