设置父溢出而不破坏孩子的位置粘性

Question

我正在使用stickyfill在两列设计中粘贴我的一个柱子.我需要我的父母垂直填充而不声明高度.stickyfill检测支持位置的浏览器(firefox,safari):sticky; 并让这些浏览器接管.

我习惯于简单地将父级的溢出设置为隐藏,但在这种情况下,它会破坏位置:粘性; 从工作.

我的解决方案是将父级的display属性设置为table.这是我测试过的,但我想知道这是不是一个坏主意,或者是否有更好的方法来实现我的目标.

示例: JSFiddle

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>

Answer 1

我不确定您想要实现什么目标，但以下是您应该了解和/或可以改进的一些事情：

• overflow:none无效，看看溢出的可能值：

/* 内容不被剪裁 */
Overflow:visible;

/* 内容被剪裁，没有滚动条 */
Overflow: hide;

/* 内容被剪裁，带有滚动条 */
Overflow:scroll;

/* 让浏览器决定 */
Overflow: auto;

溢出：继承；

• 但由于您将父容器显示为table，因此将overflow不起作用：

Overflow 属性指定当内容溢出其块级容器时是否剪辑内容、呈现滚动条或仅显示内容。

来源

• 最后但并非最不重要的一点是，如果您display:table在父母中使用，那么在您的孩子中floats使用display:table-cell

阅读此处有关显示为表格的信息

编辑：

因此，从我使用小提琴的测试来看，正如预期的那样，如果您想继续使用display:table,overflow 将在那里过时，正如我上面所解释的。

我也测试了设置display:inline-table\table-cell\inline-block并且一切正常。

所以我不认为使用其中任何一种有什么缺点或优点。