0

今天我遇到了使用内部库为 Web 应用程序创建弹出窗口的情况。在我的例子中，这个弹出窗口将包含带有文本的单个段落，我们不能假设这个文本的数量。

当我调查html这个库为此弹出窗口生成的内容时，有一些嵌套div元素，在最低级别有一个divfor header、body 和一个 footer。

作为创建弹出对象的函数的参数之一，我可以传递正文部分的硬编码宽度和高度（作为 json 对象），但我只限于此选项，如果未传递任何内容，则假定为默认值，因此body 只能指定一些高度/宽度（目前我不能传递其他参数来直接设置样式）。

我想通过将我的段落放在div我可以访问的自己的段落中来解决这个问题。

现在，问题是当文本比外部 div 占用更多空间时div，外部div大小保持不变，并且文本似乎从弹出窗口中“泄漏”。

我试过这样的东西（添加overflow:auto到内部的风格div）

<div class="popup-body" style="width: 450px; height: 460px">
    <div class="my-content-div" style="overflow:auto>
        //text in paragraph
    </div>
</div>

如果我使用 inmy-content-div height:inherit或者height: 100%我可以得到我想要的结果，问题是我不能使用height:inherit，因为 IE7 不支持它（并且我们的应用程序必须支持 IE 从版本 7 开始）并且我无法以百分比指定高度，就像height:100%（现在我不记得为什么我不能这样做了，但是当我知道这一点时，我会在这里写出来）。

所以基本上我只想让内部 div 的高度与外部 div 的高度相同。

那么，除了我提到的（height:inherit或height:100%）之外，还有其他方法可以实现我想要的吗？

4

1 回答 1

0

为什么不能将内部 div 设置为与外部 div 相同的高度px而不是%外部 div？

.popup-body {
    width: 450px; 
    height: 460px;
}

.my-content-div {
    overflow-y:scroll;
    height:460px;
}

见小提琴http://jsfiddle.net/feitla/jZdka/

于 2013-07-22T19:12:59.683 回答