css高度百分比悖论问题
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
这两个容器没有设高度
所以他们都是被一层一层的撑高的
那如果我们给内层加一个50像素哈
他肯定就外层也跟着变
这个没有问题
但是
如果我想把它设置一个百分比，比如50%
那这时候从理论上就会有个问题
为什么呢
外层容器说了
我的高度取决于你内层有多高
那内层容器又说了
我就是你的50%
那这就出现了一个悖论
所以呢这个50%就会不生效大家看
那有的同学可能会像我一样有这种想法
我现在啊是想让他
就是...
有其他的内容把它撑高
然后呢
我这里边的这个内层容器就占他的50%
可不可以呢
也不可以
为什么呢
因为
虽然其他容器撑高了
但是你这个inner（内层容器）
还是参与到了把它撑高的行列里面去
因为你还是占空间了吗
所以还是有悖论
除非有一种情况
就是我们把这个inner脱离文档流
让他不占外层的这个空间
所以呢我们把它改一下position等于
absolute 然后呢我们把外层改成 relative
大家看
这回他就可以了
我们可以把它动态的调
大家看
他就会永远占这个外层容器的50%了
好说到这呢
我们再回过头来看上次的例子
为什么我说
用百分比的情况下解决不了那个问题
因为我们是把最外层设了一个 max height
max-height等于50%吧
然后呢我们内层
想计算一个高度
当时是这样想的
让他也是 max height
等于
比如说计算一下
百分之百减去
为什么不行呢
因为外层没有设置高度
这个 max-height 和 height 还不一样
有说他对于外层这个容器
他有多高还是要取决于内层
所以你内层又来一个百分比
还是存在被论
好那为什么左侧的这个列是可以的呢
当时左侧的这个列大家还记得
最终的解决方案就是把它写了一个
calc 的高度百分之百
减去一堆的计算
那为什么这个左
侧的这个列是可以的呢
因为这一列就是absolute
我们来检查一下这个元素
大家看 position: absolute