100% 宽度以在流体布局中定位固定元素

【问题标题】：100% width to position fixed elements in fluid layout100% 宽度以在流体布局中定位固定元素
【发布时间】：2014-12-07 04:29:04
【问题描述】：

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

代码如下：

.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 链接：http://jsfiddle.net/s2myn87q/4/

【问题讨论】：

标签： css responsive-design position fixed fluid-layout

【解决方案1】：

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

body {
  margin: 8px;
}

你可以使用

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

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;
}

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

【讨论】：