Как отрегулировать ширину 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/

Answer 1

Если поддержка браузера не является большой проблемой, вы можете использовать position: sticky

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