css height percentage问题?

新手上路,请多包涵

根据w3c文档描述:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'. A percentage height on the root element is
relative to the initial containing block.

即如果没有声明包含块的height,那么子元素百分数高度会重置为auto,那么以下代码:

<body>
    <div style="height: auto; background: yellow;">
        <p style="height: 50%; background: green;">NOT half as tall; height reset to auto</p>
    </div>
</body>

p元素的行高应该刚好由内容“NOT half as tall; height reset to auto”撑开,但是实际运行结果显示,行高为body元素行高的50%,如下:

clipboard.png
请教大家,谢谢!

阅读 2.2k
1 个回答

我在Google和firefox的测试结果都和你的截图不一致,可能是你当前用的浏览器版本的问题。
chrome
firefox

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题