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

时间:2015-02-17 05:49:45

标签: jquery html css

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

条件: -

  1. 不能使用div或其他标签作为最后一个列表项目。
  2. 必须在滚动内部显示而不是在外面。
  3. 只有两个条件。 如果它可以通过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>
    &#13;
    &#13;
    &#13;

2 个答案:

答案 0 :(得分:0)

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

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

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

<强>演示

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

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>