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

Question

我使用stickyfill在两列设计中巩固了我的一个专栏。我需要我的父母垂直填充而不声明高度。 stickyfill 会检测支持位置的浏览器（firefox，safari）：粘贴; 并让这些浏览器接管。

我以前只是将父母的溢出设置为隐藏，但在这种情况下，它会打破 position：sticky; 。

我的解决方案是将父显示属性设置为表。这是我测试过的，但我想知道这是不是一个坏主意，或者是否有更好的方式来实现我的目标。

示例： 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

根据你的问题，我对你的总体目标有点不清楚。但是，如果您要将父容器设置为display:table，那么您也可以使用display:table-cell作为子容器并删除float。

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

此外，我不知道你想支持哪些浏览器，但position:sticky; is not support by some major browsers我建议不要使用它，直到它得到更好的支持。

Answer 2

实际上，overflow: hidden并未破坏粘性行为，它只是将此父容器设置为粘性元素的滚动框。

请参阅CSS Positioned Layout Module Level 3 W3C Working Draft：

  粘性定位盒的位置与相对位置相似   定位框，但偏移量是参考的计算的   带滚动框的最近祖先，如果没有祖先，则为视口   有一个滚动框。

另请参阅my response类似的问题。

Answer 3

我不确定你想要达到的目标，但这里有一些你应该知道和/或可以改进的事情：

• 您不应该使用position:sticky，因为只适用于FF35 +和Safari7.1 + -webkit prefix（见下图）source。

  因此，我建议您使用JS解决方案。

。

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

  

/ *内容未被剪裁* /
   溢出：可见;

     

/ *内容被裁剪，没有滚动条* /
   溢出：隐藏;

     

/ *内容被剪裁，滚动条* /
   溢出：滚动;

     

/ *让浏览器决定* /
   溢出：自动;

     

溢出：继承;

• 但由于您将父容器显示为table，因此overflow将无效：

  

overflow属性指定是否剪辑内容，渲染   滚动条或仅在溢出其块级别时显示内容   容器

Source

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

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

编辑：

所以从我使用你的小提琴进行测试，并且正如预期的那样，如果你想继续使用display:table，那么overflow将在那里过时，正如我在上面所解释的那样。

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

所以我没有看到使用其中任何一个的缺点或优点。