固定位置停止元素以填充父包含者

Question

我面临着固定位置的问题。我有两排在一起，我希望它们看起来像这样：

这就是我想要的。现在因为我需要在我的项目中使用固定的位置使第二行停靠，我将位置更改为固定。这是我的css文件：

.header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 5vw;
padding-top: 15px;
}

.story-board-header {
font-weight: bold;
background-color: #072e77;
color: #EFF0F2;
height: 3vw;
padding-top: 15px;
position:fixed;
}

现在我得到的是：

如您所见，第二个div没有填满所有容器。 这里还有我的jsfiddle：

jsfiddle

有人可以帮忙吗？

Answer 1

只需使用width: 100%。

* {
  margin: 0;
  padding: 0;
}
.header {
  font-weight: bold;
  background-color: #4070CB;
  color: #EFF0F2;
  height: 5vw;
  padding-top: 15px;
}
.story-board-header {
  font-weight: bold;
  background-color: #072e77;
  color: #EFF0F2;
  height: 3vw;
  padding-top: 15px;
  position: fixed;
  width: 100%;
}

<div class="container-fluid">
  <div class="row  header">
    <div class="col-xs-12">

    </div>
  </div>
  <div class="row" style="position:relative;">
    <div class="col-xs-12  story-board-header">
      eweweweewew
    </div>
  </div>

</div>

Answer 2

您忘记将bootstrap.css链接到项目：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

https://jsfiddle.net/pb7vptm8/1/

Answer 3

我不是100％肯定你想要完成的事情。

固定位置使元素相对于浏览器窗口而不是它的容器（source）。

您可以同时使用width: 100%或left: 0; right: 0;将元素设置为整个屏幕的宽度。

固定还会导致元素在滚动页面时保持不变。这就是你想要的吗？