设置父级溢出而不破坏子级的位置粘性[重复]

我在用着粘性填充物 https://github.com/wilddeer/stickyfill将我的一栏固定在两栏设计中。我需要我的父母垂直填充而不声明高度。粘性填充物检测支持的浏览器（firefox、safari）位置：粘性；并让这些浏览器接管。

我习惯于简单地将父级的溢出设置为隐藏，但在这种情况下，它会中断位置：粘性；从工作中。

我的解决方案是设置父母的display财产给table。根据我的测试，这是有效的，但我想知道这是否是一个坏主意，或者是否有一个better实现我的目标的方法。

Example: JSFiddle https://jsfiddle.net/jszoukxr/1/

CSS:

.wrapper {
    overflow: visible;
    display: table;
    width: 400px;
}

.left {
    float: left;
    width: 60%;
    height: 1280px;
    background-color: #EEE;
}

.right {
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

HTML:

<div class="wrapper">
    <div class="left">Content</div>
    <div class="right">Sticky</div>
</div>

根据你的问题，我有点不清楚你的总体目标是什么。但是如果您要将父容器设置为display:table那么你不妨使用display:table-cell对于儿童容器并摆脱float.

.wrapper {
    border-collapse: collapse;
    display: table;
    width: 100%;
}
.right {
    width: 66%;
}
.left {
    width: 44%;
    top: 0;
}

我也不知道你想支持哪些浏览器，但position:sticky; 一些主流浏览器不支持 http://caniuse.com/#search=sticky我建议在得到更好的支持之前不要使用。