Получить элемент, чтобы придерживаться нижней части экрана

Question

Я пытаюсь вставить элемент html с помощью скрипта содержимого расширения chrome. Я хочу, чтобы элемент накладывался на страницу, и придерживался нижней части экрана, например, счетчик вниз 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> называется 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*/ 
}