jQuery-UI的可調整大小取消位置：固定

Question

我正在創建一個示例Chrome擴展，其中我在頁面中注入了一個小的<ul>。它應該在窗口的左下角坐，所以我給它

position: fixed; 
    bottom: 0px; 
    left: 0px; 

這是罰款，直到我想使<ul>調整大小。由於某種原因，當我將jQuery-UI的可調整大小添加到<ul>時，它會抵消修正，因此<ul>會卡住整個頁面的底部而不是窗口。我怎樣才能解決這個問題？

請注意我試過接受解決方案here，但是當我嘗試它時，雖然盒子確實留在窗口中，但當我試圖調整它的大小時，隨着尺寸的增加，整個東西都會漂浮起來。由於某種原因，它將頂部和高度聯繫在一起，所以它們都會在調整大小時改變。

的manifest.json：

{ 
    "name": "injection", 
    "description": "samples at code injection", 
    "version": "1", 
    "manifest_version": 2, 
    "content_scripts": [ 
     { 
      "matches": [ "<all_urls>"], 
      "css":["style.css", "jquery-ui.css"], 
      "js":["jquery-2.1.0.min.js", "resize.js", "jquery-ui.min.js"] 
     } 
    ], 
    "permissions": [ "http://127.0.0.1:8000/", "<all_urls>", "storage", "tabs" ] 
} 

resize.js：

$(function() { 
    var container = $("<ul />", { class: "container_t" }); 
      container.resizable({ handles: "n" }); 
      var header = $("<li />", { class: "header_t" }); 
      var content_container = $("<li />", { class: "content_container_t" }); 
     container.append(header); 
     container.append(content_container); 
    $('body').append(container); 
}); 

的style.css：

.container_t { 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
    list-style: none; 
    width: 350px; 
    height: 150px; 
    background-color: red; 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
.header_t { 
    width: 100%; 
    height: 35px; 
    background-color: blue; 
    padding: 5px; 
    box-sizing: border-box; 
} 

.content_container_t { 
    width: 100%; 
    height: 70%; 
    background-color: green; 
    padding: 5px; 
    box-sizing: border-box; 
} 

.ui-resizable-n { 
    cursor: n-resize;  
    border-top: 5px solid purple; 
} 

Answer 1

正如我所說的溶液here，對我來說並不完美，但它很接近。我必須拿出底部：0;從我添加的新容器中將其換成頂層：80％！重要; 的代碼看起來是這樣的：

resize.js：

$(function() { 
    var resize_container = $("<span />", {class: "resize_container"}); 
     var container = $("<ul />", { class: "container_t" }); 
       container.resizable({ handles: "n" }); 
       var header = $("<li />", { class: "header_t" }); 
       var content_container = $("<li />", { class: "content_container_t" }); 
      container.append(header); 
      container.append(content_container); 
     resize_container.append(container); 
    $('body').append(resize_container); 
}); 

的style.css：

.resize_container { 
    position: fixed !important; 
    top: 79% !important; 
    left: 0px !important; 
} 

.container_t { 
    list-style: none; 
    bottom: 0px; 
    left: 0px; 
    width: 350px; 
    height: 150px; 
    background-color: red; 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
.header_t { 
    width: 100%; 
    height: 35px; 
    background-color: blue; 
    padding: 5px; 
    box-sizing: border-box; 
} 

.content_container_t { 
    width: 100%; 
    height: 70%; 
    background-color: green; 
    padding: 5px; 
    box-sizing: border-box; 
} 

.ui-resizable-n { 
    cursor: n-resize;  
    border-top: 5px solid purple; 
} 

ui-resizable-e { 
    cursor: e-resize;  
    border-right: 5px solid purple; 
}