相对于父母的最大高度不起作用答案

【问题标题】：Max-height relative to parent doesn't work相对于父母的最大高度不起作用
【发布时间】：2013-01-26 21:07:18
【问题描述】：

我正在尝试将大量内容放入“Thickbox”（Javascript 弹出窗口）中，它几乎可以正常工作，但我无法使 max-height: 100%;（相对于父级）和 overflow-y: scroll; 工作。

有两种结果：

我只想把它放在盒子里，垂直滚动，我不想让它跑到盒子外面。一旦你看一下 JSFiddle，你就会明白我的意思：http://jsfiddle.net/m4aKk/（最好在大屏幕上观看 - 1600px+）。任何建议都会很棒！

为什么height: 100%; 或max-height: 100%; 与其父级无关？

【问题讨论】：

【解决方案1】：

解决办法是使内框位置absolute。像这样的：

#TB_ajaxContent {
    width: 440px;
    overflow-x: hidden;
    position: absolute;
    top: 30px;
    bottom: 10px;
}

这应该使内部 div 以您喜欢的方式定位。这是更新后的fiddle - 注意我已经从内联样式中删除了height:auto; height:100%。

这是让内部 div '与父级一样高'的常见技巧。

【讨论】：

【解决方案2】：

在你的代码中替换这一行：

<div id="TB_window" style="width: 470px; height: 100%; margin-left: -335px; top: 48px; margin-top: 0px; visibility: visible;">

只需将height: 314px; 更改为height: 100%; !!!

【讨论】：