带有滚动内容的可停靠 DIV答案

【问题标题】：Dockable DIVs with scrolling inner content带有滚动内容的可停靠 DIV
【发布时间】：2011-06-16 22:16:01
【问题描述】：

我有一个可以在页面上有多个 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 的大小，但这不起作用。

有人指点一下吗？

谢谢

【问题讨论】：

标签： jquery css html

【解决方案1】：

DockableWindowContent 不必在position:absolute 中。

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

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

【讨论】：