【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 2012-12-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-02
      • 2012-08-28
      • 1970-01-01
      • 2013-08-28
      • 2013-09-30
      相关资源
      最近更新 更多