我要评论heigh:100%失效
解决方案：
第一种
html, body {
height: 100%;
}
第二种
div {
height: 100%;
position: absolute;
}
非定位元素的宽高百分比计算不会将 padding 计算在内，而定位元素会计算在内。
利用这个特性可以实现图片左右半区点击分别上一张图下一张图效果
<style>
.box {
display: inline-block;
position: relative;
}
.prev,
.next {
width: 50%; height: 100%;
position: absolute;
top: 0;
opacity: .5;
}
.prev {
left: 0;
background-color: #cd0000;
}
.next {
right: 0;
background-color: #34538b;
}
</style>
<div class="box">
<a href="javascript:" class="prev" title="上一张">上一张</a>
<a href="javascript:" class="next" title="下一张">下一张</a>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2249893882,1165836821&fm=27&gp=0.jpg">
</div>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论