2

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

请参阅http://jsfiddle.net/TxEAP/3/。起初，1div 下方有一个正确的边距。单击“附加一个”以使滚动条最终出现，使最后一个 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;
}​
4

2 回答 2

3

这是我使用 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 不会隐藏最后一个.itemdiv 的边距。

.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;
}
于 2012-06-10T13:45:31.807 回答
1

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

删除max-height:100%容器似乎可以修复我在 Chrome 21 中的测试。

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

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

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

于 2012-06-10T10:47:01.203 回答