height百分比失效

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>

• 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签

3962 0元 限免

Web前端页面制作快速入门

5499 9.8元

云知梦-HTML5网页标签

4622 0元 限免