jquery - 具有滚动内部内容的可停靠 DIV

Question

我有一个可以在页面上有多个 div 的应用程序。这些 div 的结构如下:

CSS

.DockableWindow
{
    position: absolute;
    left: 300px;
    top: 150px;
    width: 800px;
    height: 600px;
    border: 1px solid black;
    background-color: White;
    z-index: 999999;
}

.DockableWindowContent
{
    position: absolute;
    height: 87%;
    width: auto;
    margin: 0px 5px 0px 5px; 
    background-color: white;
    overflow: auto;
}

HTML

<div class='DockableWindow'>
    <table>
        <tr>
            <td>button</td><td>button</td><td>button</td><td>button</td></tr>
        <tr>
            <td colspan='4'>
                <div class='DockableWindowContent'>scrollable content goes in here</div></td></tr>
    </table>
</div>

我正在使用 JQuery 将 outerdiv 设置为可拖动和可调整大小。 resizable 标签也设置为调整包含可滚动内容的内部 div 的大小。

一切正常，可以毫无问题地拖动窗口和调整大小。

但是，我需要能够点击工具栏上的按钮并将所有当前打开的窗口水平或垂直停靠在页面上。虽然窗口将停靠，但如果用户选择，它们仍然可以调整大小和移动。

我已经尝试过多种方法，但是当调整外部 div 的大小和位置时，我无法让内部 div 正确调整大小。

我尝试使用 javascript 和 CSS 调整大小，但无论我尝试什么，内部 div 总是悬在外部 div 的底部。我也尝试过使用 JQuery 触发调整大小事件以使内部 div 调整大小，但这不起作用。

有没有人有任何指点？

谢谢

Answer 1

DockableWindowContent不必在 position:absolute 中.

绝对让它从你的 <td> 中“出来” .也许定义 #DockableWindow td {position:relative;}会有所帮助...但它似乎没用。

您可以更改 height:87%至 min-height:87%也。 (注意:ie6 不知道什么是最小高度)