Question

它在Crome中运作完美但在firefox 倒数第二个列表项 ＆＃39;国家名称8＆＃39; 不可见，你可以通过firebug看到它

条件： -

不能使用div或其他标签作为最后一个列表项目。
必须在滚动内部显示而不是在外面。

提前致谢：）

＆＃13;

.searchlist{
	position: relative;
  margin-top:50px;
}
ul{  display: block;
    max-height: 110px;
    overflow-y: auto;
    padding:0px 0px 38px 0px;
	margin:0px;
	width: 223px;
	}
li{padding: 8px 10px;
display: block;
font-size: 13px;
cursor: pointer;
background: #35404d;
}
li.fix{border-top: 1px solid #50575f;
    position: absolute;
    top: 115px;
    width: 185px;}

＆＃13;

<div class="searchlist">
	<ul>
		<li>country name 1 </li>
		<li>country name 2 </li>
		<li>country name 3 </li>
		<li>country name 4 </li>
		<li>country name 5 </li>
		<li>country name 6 </li>
		<li>country name 7 </li>
		<li>country name 8 </li>
		<li class="fix">country name 9 </li>
	</ul>
</div>

＆＃13;

Answer 1

你删除ul的填充并定位第二个最后一个li并添加底部边距。

您可以使用:nth-last-child(2)。 Browser compatibility

li:nth-last-child(2) {
  margin-bottom: 34px;
}

<强>演示

＆＃13;

.searchlist {
  position: relative;
  margin-top: 50px;
}
ul {
  display: block;
  max-height: 110px;
  overflow-y: auto;
  margin: 0px;
  width: 223px;
}
li {
  padding: 8px 10px;
  display: block;
  font-size: 13px;
  cursor: pointer;
  background: #35404d;
}
li:nth-last-child(2) {
  margin-bottom: 34px;
}
li.fix {
  border-top: 1px solid #50575f;
  position: absolute;
  top: 69%;
  width: 185px;
}

＆＃13;

<div class="searchlist">
  <ul>
    <li>country name 1</li>
    <li>country name 2</li>
    <li>country name 3</li>
    <li>country name 4</li>
    <li>country name 5</li>
    <li>country name 6</li>
    <li>country name 7</li>
    <li>country name 8</li>
    <li class="fix">country name 9</li>
  </ul>
</div>

＆＃13;

Answer 2

最好的解决方案之一就是这样，因为那些可能想让元素在上下滚动时保持固定的人！

body {
  margin: 10px;
}

ul {
  display: block;
  width: 210px;
  max-height: 120px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

li {
  padding: 8px 10px;
  display: block;
  font-size: 13px;
  cursor: pointer;
  background-color: #ddd;
}

li.fixed {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background-color: #111;
  color: #f2f2f2;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
  <li>Item15</li>
  <li>Item16</li>
  <li>Item17</li>
  <li>Item18</li>
  <li>Item19</li>
  <li>Item20</li>
  <li>Item21</li>
  <li>Item22</li>
  <li>Item23</li>
  <li>Item24</li>
  <li>Item25</li>
  <li>Item26</li>
  <li>Item27</li>
  <li>Item28</li>
  <li>Item29</li>
  <li>Item30</li>
  <li>Item31</li>
  <li>Item32</li>
  <li>Item33</li>
  <li>Item34</li>
  <li>Item35</li>
  <li>Item36</li>
  <li>Item37</li>
  <li>Item38</li>
  <li>Item39</li>
  <li>Item40</li>
  <li>Item41</li>
  <li>Item42</li>
  <li>Item43</li>
  <li>Item44</li>
  <li>Item45</li>
  <li>Item46</li>
  <li>Item47</li>
  <li>Item48</li>
  <li>Item49</li>
  <li>Item50</li>
  <li class="fixed">HEADER</li>
</ul>

修复最后一个li并滚动到ul firefox问题

2 个答案: