修复上一个li和滚动在ul firefox问题

Its working perfect in Crome but in firefox second-last list item 'country name 8' is not visible, you can see it through firebug.

它在Crome中工作得很好，但是在firefox的最后一个列表项“国家名称8”不可见，您可以通过firebug查看它。

conditions:-

条件:-

Cant use div or another tag for last list item it has to be in li.
不能使用div或另一个标签为最后的列表项它必须是在li。
It has to display inside the scroll not outside.
它必须显示在滚动条里面而不是在外面。

only two conditions. if its possible through jquery we can do that, Thanks in advance :)

只有两个条件。如果可能的话，我们可以通过jquery来实现，提前感谢:)

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

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

1 个解决方案

#1

You an remove the padding for ul and target the second last li and add the bottom margin to it.

您可以移除ul的衬垫，将第二个li作为目标，并添加底部空白。

You can use :nth-last-child(2). Browser compatibility

您可以使用:nth-last-child(2)。浏览器兼容性

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

Demo

演示

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

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

#1