position 固定和高度自动解决方案

Question

这是我的代码的类似示例。 这样它工作得还不错。 但是，我不想在 div.all-content 上确定 height:500px 因为这个 div 会有不同的高度，这取决于我放了多少帖子/文本。

附言。 在固定的 div 上，我有不同高度的标签，这取决于里面有多少帖子

如果我删除 height:500px;, position:fixed doesn't work/doesnt scroll。

所以，我想我需要 jQuery 关于 div.all-content 的高度

 .all-content { width: 100%; transform: translateY(0); height:500px; }.content { margin-top: 40px; width: 100%; height: 100%; overflow: scroll; }.fixed-position { position: fixed; right: 0; margin-right: 100px; top:10%; }

 <div class="all-content"> <div class="content" style="display: flex";> <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> <div class="tab-tab fixed-position"> FIXED </div> </div> </div>

Answer 1

根据我从您的问题中收集到的信息，目的是确保“固定”div 相对于“所有内容”保持固定，因此对相对 position 进行了更改。 只需删除转换并添加 position 相对值即可为您提供结果。 我希望这是所需要的。

 .all-content { width: 100%; position:relative; }.content { margin-top: 40px; width: 100%; height: 100%; overflow: scroll; }.fixed-position { position: fixed; right: 0; margin-right: 100px; top:calc( 40px + 10%); }

 <div class="all-content"> <div class="content" style="display: flex";> <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br><br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <br> txttxttxttxttxttxttxt txttxttxttxttxttxttxt <be> <div class="tab-tab fixed-position"> FIXED </div> </div> </div>