如何在響應寬度div內創建粘性標頭？

Question

我在側邊欄中有兩個具有響應寬度的“框”。 我需要標題是粘性的並且內容可以滾動。 如果嘗試在標頭上使用position：fixed，則會遇到問題，即它們失去了響應寬度/背景色。

這是其中一個框的jsfiddle： http : //jsfiddle.net/4tadzk7x/

HTML：

<aside class="sidebar col-xs-3 pull-right">
    <div class="box-with-header queries">
        <div class="header-fixed">
            <h5 class="headline">Headline</h5>
        </div>
        <div class="content">
            <ul class="item no-bullets red">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets blue">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets yellow">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />
        </div>
    </div>
</aside>

Answer 1

添加這兩個類：

.header-fixed{
    position:fixed;
    width:100%;
}

.content{
    padding-top:45px;
}

查看JSFiddle演示

更新：

如果寬度並不總是100％，那么您可以簡單地移動標頭div並修改HTML代碼，如下所示：

<aside class="sidebar col-xs-3 pull-right">
    <div class="header-fixed">
        <h5 class="headline">Headline</h5>
    </div>
    <div class="box-with-header queries">
        <div class="content">
            //content ...
        </div>
    </div>
</aside>

查看JSFiddle演示

Answer 2

使用.header-fixed width: 100% ， top: 0

然后這樣：

.box-with-header.queries {
  max-height: 250px;
  height: 250px;
  margin-top: 3em;
}

小提琴

Answer 3

我不確定我是否正確理解您的問題。 但是，如果您希望標頭是固定的和響應的。 使其位置固定，寬度為100％。 那應該做。

更新的小提琴： http : //jsfiddle.net/4tadzk7x/1/

.headline {
  background: red;
  padding: 10px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  font-size: 13px;
  position:fixed;
  top:0;
  width:100%;
}

您還需要在內容中添加margin-top，以使其不與標題重疊。

div.content{
     margin-top:40px;
}