css - 如何调整具有位置的div的宽度：固定到父级？

Question

如何调整具有位置的div的宽度：在Bootstrap中固定为父级？

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="sidebar">
        SIDEBAR
      </div>
    </div>
    <div class="col-sm-9">
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
      x<br />
    </div>
  </div>
</div>


.sidebar {
  background-color: red;
  position: fixed;
  width: 100%;
}

我必须严格确定父母的宽度还是可以自动完成？如果是，如何？也许引导程序有什么用的？

JSFIDDLE：http: //jsfiddle.net/webayvsg/

标签： csstwitter-bootstrapbootstrap-4

Answer 1

如果浏览器支持不是大问题，您可以使用 position:sticky

.sidebar {
    background-color: red;
    position: sticky;
    top: 0;
    width: 100%;
}