固定位置で親収納箱を埋めるように要素を停止

Question

固定位置に問題があります。私は、互いの上に2つの行を持っていると私は彼らが次のようになりたい：

私が欲しいものです。私は2番目の行をドッキングさせるために私のプロジェクトで固定された位置を使用する必要があるので、私は位置を固定に変更しました。ご覧のとおり

第二のdivは、そのすべての容器を満たすされていません。今ここに

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

は私が得るものです：ここに私のCSSファイルです。また、ここで は私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;の両方を使用して、要素を画面全体と同じ幅にすることができます。

固定すると、ページをスクロールするときに要素がそのまま残ります。それはあなたが欲しいものですか？