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来激活resize事件以使内部div调整大小但这不起作用。

有没有人有任何指示？

由于

Answer 1

DockableWindowContent不一定在position:absolute。

绝对拥有它<td>的“ out ”。也许定义#DockableWindow td {position:relative;}会有所帮助......但它似乎毫无用处。

您也可以将height:87%更改为min-height:87%。（注意：ie6不知道什么是最小高度）

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

1 个答案: