javascript - tab div中的高度计算,不使用calc()
本文介绍了javascript - tab div中的高度计算,不使用calc()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如图,A具有固定高度,B 距离A 15px并且高度一直延伸到底部。
在css3中可以通过calc属性完成;
在js中可以通过获取父元素高度减去A和外边距来完成,但是当这种情况存在于tab分页中,页面加载时隐藏的dvi并没有去计算高度,而且添加了很多id值,不是很灵活。
另外也不能使用position:absolute;
还有没有什么办法用css去解决?需要兼容ie8,所以不使用css3属性
解决方案
这是能兼容IE6的方法。
.main {
width: 200px;
height: 500px;
background-color: blue;
overflow: hidden;
}
.top {
width: 100%;
height: 100px;
background-color: red;
margin: 0 0 15px 0;
}
.bottom {
width: 100%;
height: 100%;
background-color: yellow;
float: left;
}
<div class="main">
<div class="top"></div>
<div class="bottom"></div>
</div>
不知道这是不是你想要的效果
PS:JS也能很好的实现,隐藏部分可以在创建或展现时进行计算。
这篇关于javascript - tab div中的高度计算,不使用calc()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文