如何在滚动时使 div（flexbox）保持在固定位置（用 div 制作表格）答案

【问题标题】：how to make a div (flexbox) stay in a fixed position while scrolling (did a table with divs)如何在滚动时使 div（flexbox）保持在固定位置（用 div 制作表格）
【发布时间】：2018-03-01 21:46:00
【问题描述】：

我有一个用 div 制作的表格，使用 flexbox 来获得我的 div 的漂亮表格格式。

现在我得到了这样的结构：

<div class="tableWrapper">
<div class="tableHeader">   
    <div class="tableHeaderRow">
        <div class="tableHeaderCells"></div>
        <div class="tableHeaderCells"></div>
    </div>
</div>
<div class="tableBody">
    <div class="tableBodyRow">
        <div class="tableBodyCells"></div>
        <div class="tableBodyCells"></div>
    </div>
    <div class="tableBodyRow">
        <div class="tableBodyCells"></div>
        <div class="tableBodyCells"></div>
    </div>
    <div class="tableBodyRow">
        <div class="tableBodyCells"></div>
        <div class="tableBodyCells"></div>
    </div>
</div>

所以现在我想要实现的是让“tableHeader”始终保持在同一位置，所以当“tableBody”内容很大（可能有 50 行）并且不适合浏览器屏幕时，当用户向下滚动时，标题会跟随，因此它始终可见。

我尝试使用position:fixed，但它弄乱了“tableBody”内容。

这里是当前的css：

    .tableWrapper {
    width: 100%;
    height: 100%;
    margin-top: 15px;
    position: relative;
}

.tableHeader {
    width: 100%;
    position: relative;
}

.tableHeaderRow {
    display: flex;
    height: 35px;
    border-bottom: 1px solid #000;
    align-items: center;
}

.tableHeaderCells {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: none;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    height: 100%;
    width: 100%;
}
.tableBodyCells {
    display: flex;
    border-top: none;
    border-bottom: none;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.tableBody {
    width: 100%;
    height: 100%;
    position: relative;
}

.tableBodyRow {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    margin-bottom: 2px;
}

这里有一个小提琴：jsfiddle

所以我想要获得的最终结果是，对于超过 50 行的正文，我希望用户能够向下滚动，同时将标题始终留在屏幕上，而且“滚动大小”是一个加号（不知道怎么称呼）等于行高，意思是当用户滚动一次时，它会下降一个固定的量，并在标题下准确地放置一个正文行，以避免当用户滚动你时得到标题，然后在它下面切半排，希望你明白我的意思！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

.tableWrapper{position:relative;} .tableHeader{position:absolute;width:100%:`}

【讨论】：

?抱歉没明白，把 potision:absolute 放在 tableHeader 上并没有改变任何东西，它只是弄乱了与标题重叠的主体

【解决方案2】：

我不知道您的位置问题是什么：已修复，但它似乎并没有改变正文内容。

.tableHeader {
    width: 100%;
    position: fixed;
    background-color: #FFFFFF;
    z-index:999;
}
.tableBody {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 50px;
}

JSfiddle

虽然标题的宽度仍然存在问题，但我认为您可以通过使用 calc() 从 tableHeader 的宽度中删除正文边距来设置它 .

【讨论】：

您的解决方案与此答案下方的用户相同，所以会问您同样的问题，这就是我想出的使用 position: fixed，这可以工作，但最重要的是以某种方式修改滚动，这意味着当用户滚动一次时，它会滚动到底需要多少才能将下一组正文行与标题对齐？希望你明白我的意思，现在当你滚动时，它只是滚动，所以在 1 次滚动后，当前的顶部正文行被剪切，我希望滚动将行正好放在标题下方

【解决方案3】：

请检查这个你可以使用position: sticky;而不是position: sticky;请检查fidle，希望它对你有帮助 https://jsfiddle.net/06L52wm1/36/

【讨论】：

已经在您的第一篇文章中看到并回答了您！需要关于滚动问题的额外帮助，如所述