javascript - jQuery UI 可调整大小移动我的 DOM 元素

Question

前言:我搜索了 stackoverflow，发现了其他几个提出这个确切问题的实例。我试图理解它们，但我是新手，这对我来说没有意义。对于再次问同样的问题，我深表歉意，但所提供的解决方案似乎并不奏效。

这是 my jsfiddle .拖动上边缘或右上角，div 将跳到屏幕的上边缘，有时甚至会部分跳出屏幕。

HTML:

<div id='chat'>
    <div id='content'></div>
    <input id='field' type='text' value='',placeholder='' />
</div>

CSS:

#chat {
    background-color: rgba(0,0,0,0.8);
    min-width: 400px;
    min-height: 200px;
    position: fixed !important;
    bottom: 10px !important;
    left: 10px;
    padding: 5px;
    color: white;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
}

#content {
    position: absolute;
    overflow-y: scroll;
    top: 5px;
    bottom: 30px;
    left: 5px;
    right: 5px;
    font-family: verdana;
    font-size: 8pt;
}

#field {
    position: absolute;
    left: 5px;
    bottom: 5px;
    background-color: rgba(0,0,0,0);
    color: white;
    border-width: 1px;
    outline: 0;
    font-family: verdana;
    font-size: 8pt;
}

JS/jQuery:

window.onload = function() {
    $('#field').each(function(){
        $(this).width($(this).parent().width()-4);
    });

    $('#chat').resizable({
        handles: 'n, ne, e',
        resize: function(event, ui) {
            $(this).css({left:'10px'}),
            $(this).css({bottom:'10px'}),
            $('#field').width($('#field').parent().width()-4);
        }
    });    
    var handles = $('#chat').resizable('option', 'handles');
    $('#chat').resizable('option', 'handles', 'n, ne, e');
}

Answer 1

找到解决方案。它在 Jide's comment over here .

这解决了问题:

{
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
}