# css高度百分比悖论问题 {% embed url="" %} {% embed url="" %} 这两个容器没有设高度 所以他们都是被一层一层的撑高的 那如果我们给内层加一个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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunzsh.gitbook.io/xiaoshan.bug/css-gao-du-bai-fen-bi-bei-lun-wen-ti.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.