100％宽度，用于定位流体布局中的固定元件

Question

我正在尝试使用固定标头创建流畅的页面布局。但是我遇到了使固定标头流畅的问题。

以下是代码：

.container {
  max-width: 68.5em;
  margin: 0px auto;
  border: 1px solid #000;
  height: 1000px
}
header {
  position: fixed;
  top: 0;
  border: 1px solid red;
  height: 55px;
  width: 100%;
}

<section class="container">
  <header>
  </header>
</section>

Js Fiddle Link：http://jsfiddle.net/s2myn87q/4/

Answer 1

由于大多数浏览器在其默认样式表中使用以下样式：

body {
  margin: 8px;
}

您可以使用

header {
  left: 8px;
  right: 8px;
  width: auto; /* default value */
}

＆＃13;

＆＃13;

body {
  margin: 8px;
}
.container {
  max-width: 68.5em;
  margin: 0px auto;
  border: 1px solid #000;
  height: 1000px
}
header {
  position: fixed;
  left: 8px;
  right: 8px;
  top: 0;
  border: 1px solid red;
  height: 55px;
}

＆＃13;

<section class="container">
  <header>
  </header>
</section>

＆＃13;

＆＃13;

＆＃13;