如何“摆脱”portview内容元素的底部边框（容器溢出-y滚动）也有边框

Question

我想创建一个无缝的端口视图，其中包含一个元素列表，如下图所示。

顶部： 底部：

我使用margin: -1px 0px 0px -1px;模仿折叠边框并隐藏第一个元素的顶部边框。但是当我滚动到底部时，仍然有双边框（最后一个元素边框的1px +容器边框的1px）。请查看代码段。

我的问题是“有没有办法隐藏最后一个元素的底部边框？”。非常感谢所有帮助！

一些要求：

1. 容器和元素必须具有1px边框
2. 元素的标记应该彼此相同。它们可以被JS改变（这很丑陋，但如果它是唯一可行的方法那么就好了。）
3. 尺寸必须精确到像素。
4. IE8 +兼容

div {
  border: 1px solid #ccc;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.container {
  height: 96px; /*(elements' height - 1) * page view + 1 */
  overflow-y: auto;
}
.element {
  height: 20px;
  margin: -1px 0px 0px -1px; /* mimic border-collapse & fix border-top seam */
}

<div class="container">
  <div class="element">EL 1: border-top of me is hidden.
  </div>
  <div class="element">EL 2
  </div>
  <div class="element">EL 3
  </div>
  <div class="element">EL 4
  </div>
  <div class="element">EL 5
  </div>
  <div class="element">EL 6
  </div>
  <div class="element">EL 7: border-bottom of me would like to be hidden as well.
  </div>
</div>

Answer 1

您可能需要考虑更改您的CSS。我在这里所做的就是在container周围放置一个边框，并为每个div.element应用一个底边框。只需将一个类（在我的示例中，我使用类名last）应用到最后div.element并将其边框宽度设置为0;

<div class="element last">...</div> // this is the last element 

div {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

.container {
   border: 1px solid #ccc;
   height: 96px; /*(elements' height - 1) * page view + 1 */
   overflow-y: auto;
 }

.element {
   height: 20px;
   border-bottom: 1px solid #ccc; 
 }

 .element.last {
    border-bottom-width: 0;
 }

jsbin example

Answer 2

试试这个

.container .element:last-child{
        border-bottom:0;
    }