ストレッチ右サイドバーの背景

Question

.container { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 

 
.main-content { 
 
    width: 75%; 
 
    height: 500px; 
 
    background-color: red; 
 
    float:left; 
 
} 
 

 
.sidebar { 
 
    width: 25%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="main-content"></div> 
 
    <div class="sidebar"></div> 
 
</div>

私は私の右のサイドバーの背景青い色は、画面の右端まで延長しようとしています。現在、サイドバーは固定レイアウトです。画像の矢印は、背景を青くしたい場所を示しています。

EDIT：要求されたとして、いくつかのコードを追加しました。

Answer 1

あなたは（私はあなたが欲しいと仮定している）あなたのcontainerが400ピクセル幅のままにしておきたい場合は示したように、あなたはbodyに50％で、急激な色の変化を持つ線形グラデーションの背景を割り当てることができます以下。 （また、デフォルトの余白を防ぐために、本体にmargin: 0を追加します。）

body { 
 
    background: linear-gradient(to right, #fff 0%, #fff 50%, #00f 50%, #00f 100%); 
 
    margin:0; 
 
} 
 
.container { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 

 
.main-content { 
 
    width: 75%; 
 
    height: 500px; 
 
    background-color: red; 
 
    float:left; 
 
} 
 

 
.sidebar { 
 
    width: 25%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="main-content"></div> 
 
    <div class="sidebar"></div> 
 
</div>

Answer 2

ここに行きます。灰色の領域は、サイドバーを置くことができる場所です。

：固定幅サイドバーを備えた全幅コンテナ。

.container-fluid { 
 
    float: left; 
 
    width: calc(100% - 330px + 15px * 2); 
 
    padding: 0; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.fixed-container { 
 
    float: right; 
 
    width: 300px; 
 
} 
 

 
.main-content { 
 
    width: inherit; 
 
    height: 500px; 
 
    background-color: red; 
 
    float: left; 
 
} 
 

 
.sidebar { 
 
    width: inherit; 
 
    height: 500px; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 

 
.sidebar .bar { 
 
    width: 50%; 
 
    height: 500px; 
 
    background-color: #ccc; 
 
}

<div class="container-fluid"> 
 
    <div class="box"> 
 
    <div class="main-content column"> 
 
     <div class="foo"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="fixed-container"> 
 
    <div class="sidebar column"> 
 
    <div class="bar"></div> 
 
    </div> 
 
</div>

Answer 3

手順

あなたHTMLレイアウトに基づいて所望の効果を達成するために、100%にサイドバーの幅を設定ビューポートの幅と親コンテナの幅の合計をで除算したものを2で割った後、25%のコンテナの幅（つまり25% + (100vw - 400px)/2）。

そしてマージン右、2（すなわち25% + (100vw - 400px)/2 * -1）で割った親コンテナ幅400px、減算100%ビューポートの幅の負の値を設定します。セット.container幅に応じてアップ変動値400px

CSS

.sidebar { 
    width: calc(25% + calc(100vw - 400px /* 400px is the width of the .container */)/2); 
    margin-right: calc(calc(100vw - 400px /* 400px is the width of the .container */)/2 * -1); 
    height: 500px; 
    background-color: blue; 
    float:left; 
} 

ヘッド。

テスト

アクションでそれを見て内容のたくさんのサイドバーを埋めます。