heigh:100%失效

解決方案：

第一種
html, body {
height: 100%;
}
第二種
div {
height: 100%;
position: absolute;
}

非定位元素的寬高百分比計算不會將 padding 計算在內，而定位元素會計算在內。

利用這個特性可以實現(xiàn)圖片左右半區(qū)點擊分別上一張圖下一張圖效果

<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>

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=ikhab0j&title=height百分比失效

總結

以上是生活随笔為你收集整理的height百分比失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。