html - 如何 "get rid of"portview内元素的底部边框(容器溢出-y滚动)也有边框

Question

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

顶部: 底部:

我通过使用 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