Question

我正在尝试使用chrome扩展程序的内容脚本注入一个html元素。我希望元素叠加在页面上，并粘贴到屏幕的底部，就像倒计时栏是here。像这样的大多数问题都是要求将元素粘贴到页面底部本身，但我希望元素始终可见并且在页面的其余部分。那么如何才能让它坚持到屏幕的底部呢？

CSS：

  /*----------------*/
 /*----Main Page---*/
/*---------- -----*/
.t_inject_container {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index: 999;
    background-color:grey;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}
.menu {
    background-color:lightblue;
    border-radius:5px;
}
.t_intect_button {
    background-color:blue;
    display:block;
    height: 50px;
    width: 50px;
    margin: 5px;
    font-size: 20px;
    color: white;
    border: 0px;
    border-radius:7px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
    border-radius:5px;
}

 /*-----------------*/
 /*Timeline Element*/
/*----------------*/
.timeline_element {
    background-color:red;
    border-radius:5px;

}
.t_text_area {
    height: 50px;
    width: 100px;
}

JS：

$(function(){
    //$(".add_button").click(add_timeline_element);

    function add_timeline_element(){
        var text_input = $('<input />', {
            type: "text",
            class: "t_text_area"
        });
        var button = $('<button />', {
            text: '-',
            class: "t_intect_button",
            click: function() {$(this).parent().remove();}
        });
        var timeline_element = $('<td />', {
            class: "timeline_element"
        });
        timeline_element.append(button);
        timeline_element.append(text_input);
        $(".t_inject_row").append(timeline_element);
    }

    function create_twitter_bar(){
        var table_container = $("<table />", {
            class: "t_inject_container"
        });
            var row = $("<tr />", {
                        class: "t_inject_row"
                        });
                var menu = $("<td />", {
                    class: "menu"
                });
                    var add_element_button = $("<button />", {
                        text: '+',
                        class: "add_button t_intect_button",
                        click: function() {add_timeline_element();}
                    });
                    var minimize_button = $("<button />", {
                        text: 'm',
                        class: "minimize_button t_intect_button"
                    });
                    menu.append(add_element_button);
                    menu.append(minimize_button);
            row.append(menu);
        table_container.append(row);
        $("body").append(table_container);
    }

    create_twitter_bar();
});

Answer 1

我们假设您有一个名为<div>的{{1}}！

<强> HTML：

footer

<强> CSS：

<div id="footer">
</div>

获取元素以粘贴到屏幕的底部

1 个答案: