应用溢出时，最后一个孩子的下边距被隐藏

Question

我有一个容器 div，它的底部有孩子。问题是当div的溢出滚动条出现时，最后一个孩子的下边距被隐藏了。

请参阅http://jsfiddle.net/TxEAP/3/。起初，1 div 下方有一个正确的边距。单击“附加一个”以使滚动条最终出现，使最后一个 div 不再具有底部边距。打开 DevTools 显示最后一个孩子的边距在那里，但它在容器的视口之外，即使完全滚动到底部也是如此。

如何解决？让它在谷歌浏览器中运行就足够了。

HTML：

<div class="main">
    <div class="container">
        <div class="item">1</div>
        <!-- several of these .item divs -->
    </div>
</div>

CSS：

.main {
    height: 200px;
    overflow-y: scroll;
    position: relative;
    border: 1px solid black;
}

.container {
    width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
}

.item {
    padding: 20px;
    margin: 15px;
    border: 1px solid black;
}​

Answer 1

这是我使用 flexbox 的最终解决方案。尽管有所有 -webkit- 前缀，但它在 Chrome 上得到了足够好的支持。基本上，这个想法是有一个虚拟元素，在没有溢出的情况下，从顶部开始填充容器的空间（以便真正的子元素锚定到底部）；在溢出的情况下，它会因为height: 0而自动隐藏。它不受保证金问题的影响，也不会崩溃保证金。

http://jsfiddle.net/mCYLm/1/

HTML：

<div class="main">
    <div class="gap-filler"></div>
    <div class="item">foo</div>
    <!-- more `div.item`s -->
</div>

CSS：

div.main {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 200px;
    overflow-y: scroll;
}

div.main div.gap-filler {
    -webkit-box-flex: 1;
    height: 0;
}

div.main div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}​

---

编辑：这是一个没有 flexbox 的解决方案，但存在选择问题。

最终奏效的解决方案如下：http://jsfiddle.net/TxEAP/7/。这会附加隐藏的“内容”，这使得 Chrome 不会隐藏最后一个 .item div 的边距。

.container:after {
    content: "";
    font-size: 0;
    display: block;
    height: 1px;
}

---

编辑：以下仅在display: inline-block 可能的情况下才有效。

终于找到了解决办法。如果所有.items 都有display: inline-block 除了第一个，那么边距不会被隐藏。

http://jsfiddle.net/TxEAP/5/

.item:not(:first-child) {
    display: inline-block;

    /* attempt at getting `width: auto` like `display: block` has */
    width: -webkit-calc(100% - 2 * 15px);
    box-sizing: border-box;
}

Answer 2

如果您只是将 overflow-y: scroll; 从 .main. 移动到 .container 类，则保留边距。唯一的缺点是少于 3 个项目（对于给定的容器高度），您会得到一个小的滚动条占位符，而不是一个全高的占位符。

删除容器上的 max-height:100% 似乎可以解决我在 Chrome 21 中的测试问题。

移动属性以便溢出在容器上，保留添加到末尾的元素的边距/填充，从而导致出现滚动条。

.main {
    height: 200px;
    border: 1px solid black;
}

.container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}