Question

我有两个＆＃34;盒子＆＃34;在侧边栏中具有响应宽度。我需要标题是粘性的，内容可滚动。如果我尝试使用position：固定在标题上，我遇到了他们失去响应宽度/背景颜色的问题。

这是其中一个方框的缩写：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;
}

<强> Check JSFiddle Demo

<强>更新

如果宽度不是100％，那么您只需移动标题div ans并修改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>

<强> Check JSFiddle Demo

Answer 2

在width: 100%

上使用top: 0和.header-fixed

然后这个：

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

FIDDLE

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;
}

如何在响应宽度div中创建粘性标头？

3 个答案: