position:fixed; width:100% で親要素から飛び出してしまう

Question

ウィンドウの最下部にフッターを固定し、スクロールをしても常に固定されているようにしたいです。
.fixFooterを親要素.container に対して、 幅100%にしたいのですが、.containerから右にはみ出てしまいます。
width:1000px を指定すれば解決するのですが、、100%で飛び出るのに違和感があるのと、今後の改修でcontainerが1000px以外になる可能性もなきにしもあらずのため、現在のcssの書き方に不備があればご教示頂けますと幸いです。

<div class="container">
  <div class="fixFooter"></div>
</div>

.container {
 max-width: 1000px;
 margin: 0 auto;
}

.fixFooter {
  position: fixed;
  bottom: 0;
  height: 60px;
  border-top: 1px solid #ccc;
  background-color: #fff;
  width: 100%;
  display: block;
}

Answer 1

position:fixed;は通常のフローから除外される仕様です。.fixFooterの中に.containerを入れるようにしてみては。

【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Comments

[yayaya]

ありがとうございます！解決いたしました！

Answer 2

fixedの基準は親要素の幅ではなく、デバイス画面の幅になります。

「left: auto; 又は省略」で親要素の位置が基準にはなりますが、幅を継承する訳ではありません。