Question

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

请参阅http://jsfiddle.net/TxEAP/3/。首先，1 div下面有一个正确的边距。单击“追加一个”以便最终显示滚动条使得最后一个div不再具有底部边距。打开DevTools会显示最后一个子节点的边距，但它位于容器的视口之外，即使完全滚动到底部也是如此。

如何解决这个问题？只需将其在Google Chrome中运行即可。

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

<击>

当溢出应用时，最后一个孩子的底部边缘被隐藏

2 个答案: