固定のボックスと変化するボックス

今トップサイトのメインの部分を製作しているのですが、
詰まっている部分があります。

ボックス全体は100%で、薄いグレーに背景画像がきます。
その中に960pxのボックスがきて、さらに240pxのボックスがきます。
緑の240pxのボックスは固定です。
ここまではできたのですが、

その左隣に薄緑のボックスを設置し、ウィンドウの幅によって変わる様にしたいです。

beforeやafterなどを使っていろいろと試したのですがうまくいきません。
よろしくお願いいたします。

今できている部分のみをアップしました。
http://www.geocities.jp/toriniku_torichan/

html
1<body>
2	<div class="wrapper">
3		<header>
4			<div class="header__inner">
5				テキスト
6			</div>
7		</header>
8	</div>
9</body>

css
1		*{
2			margin: 0;
3			padding: 0;
4		}
5
6		.wrapper{
7			width: 100%;
8			background: #eee;
9		}
10
11		header{
12			position: relative;
13			width: 960px;
14			height: 300px;
15			margin: 0 auto;
16		}
17
18		.header__inner{
19			background: #b3d465;
20			width: 240px;
21			height: 150px;
22			position: absolute;
23			top: 0;
24			left: 0;
25			bottom: 0;
26			margin: auto;
27			display: flex;
28			justify-content: center;
29			align-items: center;
30		}

行動規範の内容に同意します

回答2件

薄緑のボックスをスペーサー(spacer)という名前で呼ぶとして、
まず、headerと同様にwrapperにもpositionにstatic以外のものを設定し、
wrapper配下にspacerであるエレメントを配置、spacerのwidthを、calc((100% - 960px) / 2); 、heightをheader__innerと同じにすれば、とりあえずは期待するものとなるのではないでしょうか。

html
1<body>
2    <div class="wrapper">
3        <!--スペーサー-->
4        <div class="spacer"></div> 
5        <header>
6            <div class="header__inner">
7                テキスト
8            </div>
9        </header>
10    </div>
11</body>

wrapperと追加した.spacerのスタイル

css
1.wrapper {
2  width: 100%;
3  background: #eee;
4  position: relative;
5}
6
7.spacer {
8  position: absolute;
9  width: calc((100% - 960px) / 2);
10  height: 150px;
11  background: #d0e799;
12  margin: auto;
13  top: 0;
14  bottom: 0;
15}

投稿2017/02/04 23:27

編集2017/02/04 23:28

turbgraphics200

総合スコア4267

owl

2017/02/07 07:04

返答遅れて申し訳ありません自身が思っていた通りの動きが実現でき、大変助かりました。本当にありがとうございます。

行動規範の内容に同意します

ベストアンサー

こんな感じとか。

CSS
1.wrapper {
2	overflow-x: hidden;
3}
4.header__inner::before {
5	display: block;
6	content: "";
7	opacity: .5;
8	background-color: #b3d465;
9	width: 50vw;
10	position: absolute;
11	top: 0;
12	right: 100%;
13	bottom: 0;
14}
15```**動くサンプル：**[https://jsfiddle.net/911xn4mw/](https://jsfiddle.net/911xn4mw/)