我想要一个div'sticky'贴在其他div'scrollable'里面,并且可滚动固定在视口中。到目前为止,这是我尝试过的:



 .outer {
     background-color: green;
     position: fixed;
     top: 30px;
     left: 30px;
     height: 300px;
     width: 300px;
     overflow: auto;
 }
 .inner {
     background-color: blue;
     position: absolute;
     bottom: 0;
     height: 100px;
     width: 100%;
 }
 p {
     height: 100px;
 }

<div class="outer" >
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <div class="inner"></div>
</div>





我希望蓝色框始终位于可滚动div的底部。我一直在寻找其他问题,但没有找到答案。

我还尝试将“固定”蓝色框模拟该行为,但是滚动条的“向下”箭头不起作用,这只是一个hack,不要认为应该这样做。
我尝试将此CSS用于inner类:

  .inner {
 background-color: blue;
 position: fixed;
 top: 230px;
 left: 30px;
 height: 100px;
 width: 300px;
 }




 .outer {
     background-color: green;
     position: fixed;
     top: 30px;
     left: 30px;
     height: 300px;
     width: 300px;
     overflow: auto;
 }
 .inner {
     background-color: blue;
     position: fixed;
     top: 230px;
     left: 30px;
     height: 100px;
     width: 300px;
 }
 p {
     height: 100px;
 }

<div class="outer" >
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <div class="inner"> </div>
</div>





有适当的方法来做到这一点吗?

最佳答案

您可以使用position: sticky,但这不是标准

https://developer.mozilla.org/en-US/docs/Web/CSS/position

黏性适用于chrome和FF,但可能不适用于IE,请在使用前进行全面测试

https://jsfiddle.net/n205jwkn/2/

.inner {
     background-color: blue;
     position: sticky;
     bottom: 0;
     height: 100px;
     width: 100%;
 }


要么

您可以使用此小提琴中显示的另一种设置来伪造它

https://jsfiddle.net/n205jwkn/1/

的CSS

.outer {
     background-color: green;
     position: fixed;
     top: 30px;
     left: 30px;
 }
 .container {
   height: 300px;
     width: 300px;
     overflow: auto;
 }
 .inner {
     background-color: blue;
     height: 100px;
     width: 100%;
 }
 p {
     height: 100px;
 }


的HTML

<div class="outer" >
  <div class="container">
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
    <p> sample </p>
  </div>

  <div class="inner" ></div>
</div>

关于css - 如何使组件固定在div内?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46851568/

10-12 12:22
查看更多