CSS / JS在动态ul

Question

所以，我有一个带有ul和li结构的下拉菜单，如下所示：

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

然后在JS中，我只是将动态li添加到content_container：

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

...给予

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

我正在尝试使用按钮定位固定区域，如下图所示：

ul的最大高度为800px。当有很多li时，将fixed_area按钮放在下面相当简单：

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

我可以简单地将固定按钮定位到最大高度容器的底部。

问题：

问题在于，由于我动态获取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

在输入框中添加列表名称，然后按按钮将其附加到菜单中。该固定按钮仍位于底部，而选项位于顶部。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;