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;
}

jQuery-UI的可调整大小否定了位置：已修复

1 个答案: