使元素固定在屏幕底部

EasilyBaffled 发表于 Dev

容易困惑

我正在尝试注入带有chrome扩展名的内容脚本的html元素。我希望元素叠加在页面上，并坚持在屏幕底部，就像这里的倒数计时条一样。诸如此类的大多数问题实际上都是要求将元素固定在页面本身的底部，但是我希望元素在页面的其余部分始终可见。那么，如何使它固定在屏幕底部？

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

麦格什·库玛（Magesh Kumaar）

假设您有一个<div>被叫footer！

HTML：

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

CSS：

#footer{
     position:fixed;  /*Setting up the position*/
     bottom:0;   /*Just Stay at the bottom*/
     width:100%;   /*Cover the whole screen's width or the parent element's width*/
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。