固定位置和高度自动的解决方案

时间：2020-07-14 19:10:21

标签： html jquery css height css-position

这是我的代码的类似示例。 这样就可以了。但是，我不想在div .all-content上确定height：500px，因为 该div的高度会有所不同，具体取决于我在其中放置了多少条帖子/文字。

ps。在固定div上，我的标签具有不同的高度，具体取决于内部有多少帖子

如果我删除height：500px ;，则position：fixed不起作用/不滚动。

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

.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>

1 个答案:

答案 0 :(得分：0)

从您的问题中可以得出的结论是，目的是确保“固定” div相对于“所有内容”保持固定，从而对相对位置进行更改。只需删除变换并添加相对位置，就可以得到结果。我希望这是必需的。

.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>

相关问题
最新问题