Question

我有一项工作任务，我必须为Intranet实现一个简单的基于浏览器的聊天系统。后端准备好了，现在我正在尝试创建UI部分，但它让我头疼不已，并且因为这个问题而一直在桌子上撞了几个小时:(

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

HTML在语义上看起来是正确的，但它看起来并不像它看起来那么好。这个想法是窗口（红色边框div）应该包含它的所有元素。我不知道为什么列表的水平滚动条然后我的textarea离开窗口，好像有一些偏移我没有考虑到？

我试图用尽可能少的JS来做这件事，但如果CSS方式过于复杂，那么我愿意采用JS解决方案。

虽然可能有什么问题？在此先感谢：）

--- SO要求我输入代码，所以在这里：

注意：请务必包含此JS：https://github.com/AndrewDryga/jQuery.Textarea.Autoresize/raw/master/js/jquery.textarea.autoresize.js，因为它是必需的，因此我的textarea会在获得更多文本时自动调整。该窗口应包含textarea，即使它调整大小。好像CSS可以做到，但没有？

它已经解决了!!感谢@Trevor：以下是更新的代码+小提琴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;">
...

jQuery

$('.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

JQueryUI窗口不覆盖所有内容元素

1 个答案: