相对于父元素设置的最大高度无效

Question

5

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

有两种结果：

1. 它的长度与应有的一样长，没有垂直滚动条并且超出了盒子（太多了）。 2. 它的长度与应有的一样长，有垂直滚动条并且超出了盒子（有点）。

我只想让它在盒子内部，带有垂直滚动条，并且不要超出盒子。一旦您查看JSFiddle，您就会知道我的意思：http://jsfiddle.net/m4aKk/（最好在1600像素以上的大屏幕上查看）。任何建议都将是很好的！

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

- Atadj

2个回答

0

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

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

只需要将 height: 314px; 改为 height: 100%; 即可!!!

- Hamid Talebi

它将使thickbox变得100%高。我需要它具有固定的高度，我只希望内部内容是100%高。 - Atadj

@Paul 我这样做并给出答案：将TB_window设置为自动高度大小，并将TB_ajaxcontent设置为固定高度大小。也许这可以解决你的问题。 - Hamid Talebi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PhD · Accepted Answer

一种解决方案是将内部盒子的位置设置为absolute。类似于这样：

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

这样可以使内部div按照您的要求定位。这是更新后的示例 - 请注意，我已从行内样式中删除了height:auto; height:100%。

这是一种常用的技巧，用于使内部div“与父元素一样高”。