CSS/JS位置決めボタン

Question

だから、私は以下のようにulとli構造のドロップダウンメニューがあります。

：

<ul class="container"> 
    <span class="content_container"><!-- Empty --></span> 
    <span class="fixed_area">Fixed Button</span> 
</ul> 

その後JSで、私は単にcontent_containerにダイナミックliを追加します私はTRYIだ...

<ul class="container"> 
    <span class="content_container"> 
     <li>Something</li> 
     <!-- and so on dynamically --> 
    </span> 
    <span class="fixed_area">Fixed Button</span> 
</ul> 

を与える

$('span.content_container').html(li_content); 

画像以下のようにボタンで固定領域を位置決めする×：

ul

は、800ピクセルの最大高さを有します。私は単に、最大の高さの容器の底部に固定され、ボタンを配置することができます

span.fixed_area { 
    height: 48px; 
    width: 100%; 
    position: fixed; 
    background-color: red; 
    top: 750px; 
} 

：liがたくさんある場合は、以下のようにfixed_areaのボタンを配置する非常に簡単です。

問題：

問題は、私は動的にliを取得していますので、li十分ではありませんがロードされたときに、時間がありますが、まだ固定されたボタンはまだtop:750pxに位置し、これしばしば見えないか、されていることです間違った私がやろうとしています何

：

私はhtmlの部分を構造し直すことができます。画像が表示されている時間（AとBの両方）にかかわらず、常に表示されているコンテナの下部に固定ボタンを配置する必要があります。

ご協力いただければ幸いです。

Answer 1

.content_containerだけを拘束し、そのすぐ下にボタンを置くことができます。

<div class="container"> 
    <ul class="content_container"> 
     <li>Something</li> 
     <!-- and so on dynamically --> 
    </ul> 
    <span class="fixed_area">Fixed Button</span> 
</div> 

CSS：

.content_container { 
    overflow-x: scroll; 
    max-height: 750px; // reduced because it doesn't count the button. 
} 

あなたは、任意の位置を必要としません：

.fixed_area { 
    display: inline-block; // if you want to set the height; 
    height: 48px; 
    width: 100%; 
    background-color: red; 
} 

Answer 2

は、メニューにそれを追加し、入力ボックスを押しボタンでリスト名を追加します。その固定ボタンはまだ下部にあり、オプションは上部に追加されています。

document.getElementById('press').addEventListener('click', press); 
 
ul_container = document.getElementsByClassName('container')[0]; 
 
dummy = document.getElementById('dummy'); 
 
var inp = document.getElementById('in'); 
 

 
function press() { 
 
    div = document.createElement('div'); 
 
    div.innerHTML = inp.value; 
 
    console.log(ul_container, dummy, div) 
 
    ul_container.insertBefore(div, dummy); 
 

 
}

.container { 
 
    display: none; 
 
    position: absolute; 
 
    top: 15px; 
 
    max-height: 200px; 
 
    overflow: auto; 
 
    padding: 0px; 
 
    width: 200px; 
 
} 
 
.container:hover { 
 
    display: auto; 
 
} 
 
#menu { 
 
    border: solid black; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 
#fixed_btn, 
 
#dummy { 
 
    list-style-type: none 
 
} 
 
#fixed_btn:hover { 
 
    cursor: pointer; 
 
    background: green; 
 
} 
 
#menu:hover>ul { 
 
    display: block; 
 
} 
 
li { 
 
    padding: 0px; 
 
    margin: none; 
 
} 
 
.container li:hover { 
 
    cursor: pointer; 
 
    background: blue; 
 
}

<button id='press'> 
 
    press 
 
</button> 
 
<input type="text" id="in"> 
 
<div id="menu"> 
 
    Menu Name 
 
    <ul class="container"> 
 

 
    <li id="dummy"></li> 
 

 
    <li id='fixed_btn'>BUTTON</li> 
 
    </ul> 
 
</div>