如何在div中修改组件？

Question

我希望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的底部。我一直在寻找其他问题，但我没有找到答案。

我还尝试将“修复”蓝框以模拟该行为，但滚动条的“向下”箭头不起作用，这只是一个黑客，不要以为应该这样做。
我尝试将此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>

有没有正确的方法呢？

Answer 1

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

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

sticky将在chrome和FF上运行，但可能不是IE，在使用之前彻底测试

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

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

OR

你可以用这个小提琴中显示的另一种设置伪装它

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>

Answer 2

尝试创建整体container并将蓝色div作为内容的兄弟，如下例所示：

＆＃13;

＆＃13;

.outer {
  background-color: green;
  height: 200px;
  width: 300px;
  overflow: auto;
}

.inner {
  background-color: blue;
  height: 100px;
  width: 300px;
}

p {
  height: 100px;
}

＆＃13;

<div class="container">
  <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>
  <div class="inner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;