javascript - JQueryUI 窗口未覆盖所有内容元素

Question

我有一项工作任务，我必须为 Intranet 实现一个简单的基于浏览器的聊天系统。后端已准备就绪，现在我正在尝试创建 UI 部分，但这让我很头疼，因此我的头撞在 table 上几个小时:(

这是我的 JSFiddle:http://jsfiddle.net/2PMvM/ (它使用 JQuery + JQueryUI - 1.x)

从语义上看，HTML 看起来是正确的，但它并没有看起来那么好用。这个想法是窗口(红色边框 div)应该包含它的所有元素。我不知道为什么列表的水平滚动条和我的文本区域会超出窗口，好像有一些我没有考虑到的偏移量？

我正在尝试用尽可能少的 JS 来做到这一点，但如果 CSS 方式太复杂，那么我愿意采用 JS 解决方案。

不过有什么问题吗？提前致谢:)

--- 所以需要我把代码放在这里:

注意:一定要包括这个 JS:https://github.com/AndrewDryga/jQuery.Textarea.Autoresize/raw/master/js/jquery.textarea.autoresize.js因为它是必需的，所以我的文本区域在获得更多文本时会自动调整大小。即使调整大小，窗口也应包含文本区域。看起来 CSS 可以做到，但是不行？

解决了!!感谢@Trevor:这是更新后的代码 + Fiddle HERE .谢谢!

HTML:

<div class="window">    
<div style="height: 20px;" class="wndHandle">Some username :D</div>
<div class="content" id="chatDiv" style="background:#fff;overflow: scroll;">
    <ul class="ulChat">
        <li class="msg in">Test message for testing 1</li>
        <li class="msg out">Test message for testing 2</li>
        <li class="msg out">Test message for testing 3</li>
        <li class="msg in">Test message for testing 4</li>
    </ul>
</div>
<div class="footer">
    <textarea style="width: 100%; resize: none; overflow-x: hidden;" rows="1" cols="1"></textarea>
</div>
</div>

CSS:

.ui-resizable-handle 
{
    background: #f5dc58; border: 1px solid #FFF;
    width: 9px; height: 9px;
    z-index: 2;
}
.ui-resizable-se { right: -5px; bottom: -5px; }

.window
{
    position: absolute; 
    display: inline-block;
    width: 150px;   
    height: 200px;
    border: 1px solid #bb0000;   
}

.wndHandle {
    cursor: move;
    font-size: 9pt;
    background: #888;
    color: #fff;
    padding-left: 1px;
}

Javascript:

var refresh = function() {
    var objWindow = $('.window');
    var objHandle = objWindow.find('.wndHandle');
    var objContent = objWindow.find('.content');
    var objFooter = objWindow.find('.footer');
    var objResize = objWindow.find(".ui-resizable-handle.ui-resizable-se");
    objResize.removeClass("ui-resizable-autohide");
    objContent.height(
        objWindow.innerHeight() -
        objHandle.outerHeight() -
        (
            (objFooter.length == 0) ?
            (objResize.length == 0) ? 0 : objResize.outerHeight()
            : objFooter.outerHeight()
        )
    );
}

$('.window').draggable({ handle: '.wndHandle' }).resizable({
    handles: 'se',
    minWidth: 150,
    minHeight: 100,
    resize: function( event, ui ) {
        refresh();
    }
});

$('textarea').autoresize({
    maxHeight: 80,
    onResize: function () {
        refresh();
    }    
});

refresh();

Answer 1

这里是使用jQuery调整高度的解决方案

HTML - 添加 ID

...
<div id="chatDiv" style="background:#fff;overflow: scroll;">
...

j查询

$('.window').draggable({ handle: '.wndHandle' }).resizable({
    handles: 'se',
    minWidth: 150,
    minHeight: 100,
    resize: function( event, ui ) {
        $('#chatDiv').height($('.window').height()-38);          
    }
});
$('#chatDiv').height($('.window').height()-38);
$('textarea').autoresize();

Fiddle