html - 相对于父母的最大高度不起作用

Question

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

有两种结果：

1. 它应该尽可能长，没有垂直滚动并且它超出了盒子（太多了）。
2. 它应该是尽可能长的，带有垂直滚动并且它超出了盒子（一点点）。

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

为什么height: 100%;或max-height: 100%;不是相对于它的父母？

Answer 1

一种解决方法是制作内盒位置absolute。像这样的东西：

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

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

这是让内部 div “与父级一样高”的一个很常见的技巧。

Answer 2

替换代码中的这一行：

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

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