tab div中的高度计算,不使用calc()

https://img4.mukewang.com/5ba4a42e0001d1c003550411.jpg

如图,A具有固定高度,B 距离A 15px并且高度一直延伸到底部。

在css3中可以通过calc属性完成;

在js中可以通过获取父元素高度减去A和外边距来完成,但是当这种情况存在于tab分页中,页面加载时隐藏的dvi并没有去计算高度,而且添加了很多id值,不是很灵活。

另外也不能使用position:absolute;

还有没有什么办法用css去解决?需要兼容ie8,所以不使用css3属性


拉莫斯之舞
浏览 988回答 1
1回答

GCT1015

这是能兼容IE6的方法。&nbsp; &nbsp; .main {&nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; &nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; }&nbsp; &nbsp; .top {&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 0 15px 0;&nbsp; &nbsp; }&nbsp; &nbsp; .bottom {&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; background-color: yellow;&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; }&nbsp; &nbsp; <div class="main">&nbsp; &nbsp; &nbsp; &nbsp; <div class="top"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="bottom"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;不知道这是不是你想要的效果PS:JS也能很好的实现,隐藏部分可以在创建或展现时进行计算。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript