html - 设置父溢出而不破坏子位置粘性

<分区>

我正在使用 stickyfill在两列设计中粘贴我的列之一。我需要我的 parent 在不声明高度的情况下垂直填充。 stickyfill 检测支持 position:sticky; 的浏览器(firefox、safari)并让这些浏览器接管。

我习惯于简单地将父级的溢出设置为隐藏，但在这种情况下，它会破坏 position: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>

最佳答案

根据你的问题，我不太清楚你的总体目标是什么。但是如果你打算将父容器设置为 display:table那么你不妨使用 display:table-cell对于 child 容器并摆脱 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我建议在得到更好的支持之前不要使用。

关于html - 设置父溢出而不破坏子位置粘性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29358454/

上一篇：javascript - Owl Carousel - 宽度计算错误

下一篇：html - 换行时如何使父元素收缩？

相关文章：

jquery - div水平滚动时暂停垂直滚动，水平滚动结束时继续垂直滚动

html - Google AMP 图像请求出现 404 错误

html - 输入复选框默认选中

html - CSS 条纹表格中悬停时列和行突出显示

javascript - 使用 css 在情感中嵌套

css - 当我从网格中选择网格值时，会显示模糊值

css - 将 div 左对齐到居中容器

javascript - 基础选项卡 - 包括选项卡主 div 之外的内容

jQuery给定输入ID，获取标签文本

javascript - 使用 JavaScript 为 HTML 表格单元格分配颜色