質問: ◆やりたいこと wrapperに余白をつけ、その中でheaderを固定したい ◆問題になっていること wrapperにmargin: 7px; headerにposition:fixed,width:100%,を指定すると右に少しはみ出してしまう。 ◆実現したいこと wrapperにmargin: 7px;がついている状態で position:fixed,width:100%をつけているheaderを中にいれて固定させたい。 下記の方法を試しましたが、 はみ出したままで変化はなかったです。 https://ginpen.com/2012/12/05/css-box-model/ ``` test test管理 テスト テスト テスト テスト テスト Copyright © 2015; testtest ```
回答: `width: 100%;` が~~最近の `position: relative;`~~ビューポート(20180612 14:48追記)を基準に取るので、下記の様にすればとりあえずできると思います。 ``` header { height: 50px; /* headerの高さ */ /* Headerを上部に固定 */ position: fixed; z-index: 100; /* width: 100%; */ left: 0; /* 左右を開けるのであれば 7px */ right: 0; /* 左右を開けるのであれば 7px */ } ``` **動くサンプル:** **追記:** 間違いがあったため修正しました。