Bootstrap - DIV 内容设置位置溢出：固定

Question

我正在尝试使某些 div 内容具有粘性，但内容拒绝受限于父 div，因为它是固定的。

我想知道是否有任何我可以使用的 CSS 技巧，而不必在 .sticky-block 上设置 width。最坏的情况下，我可以根据 Bootstrap 断点设置不同的 widths。但我宁愿固定 div 以某种方式利用 Bootstrap 的列。

http://output.jsbin.com/savoza

HTML:

  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="sticky-block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quod deleniti voluptatibus quaerat eaque aspernatur fuga, quo perspiciatis ab, neque eveniet adipisci id sunt facere animi alias nihil pariatur suscipit!</p>
        </div>
      </div>
      <div class="col-sm-6">
        [...lots of content...]
      </div>
    </div>
  </div>

CSS:

.sticky-block {
  position: fixed;
}

Answer 1

将 col-sm-6 添加到粘性块。

<div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="sticky-block col-sm-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quod deleniti voluptatibus quaerat eaque aspernatur fuga, quo perspiciatis ab, neque eveniet adipisci id sunt facere animi alias nihil pariatur suscipit!</p>
        </div>
      </div>
      <div class="col-sm-6">
        [...lots of content...]
      </div>
    </div>
</div>

然后添加一个最大宽度，这样当页面大于容器时它不会溢出。

.sticky-block.col-sm-6 {
    max-width: 585px;
}

然后只需在 768px CSS 断点的 [lots of content] div 顶部添加一些填充。

Answer 2

固定容器将从父值继承宽度。

.sticky-block {
    width: inherit; 
    max-width: 585px;
    position: fixed;
}

我添加了一个像 jonathan 一样的最大宽度，它给出了相同的结果。

Bootstrap - DIV 内容设置位置溢出：固定

Bootstrap - DIV overflow when content is set position: fixed

css

css-position

twitter-bootstrap