css - 使用 Flexbox Grid 固定行

Question

我正在使用 flexboxgrid css 库 (www.flexboxgrid.com)，我想固定第一行并保持容器的整个宽度。

我目前在第一行结束，但不是全宽。这是我到目前为止所做的:

HTML:

<div class="Wrapper">
  <div class="row center-xs middle-xs fixedHeader">
    <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
      <div class="box">
        <h3>Fixed Header</h3>
      </div>
    </div>
  </div>

    <div class="row center-xs middle-xs normalContent">
    <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
      <div class="box">
        <h3>normal content</h3>
      </div>
    </div>
  </div>

  </div>

CSS:

.Wrapper{
     max-width: 1520px;
    margin: 0 auto;
    padding: 80px 40px;
}
.fixedHeader {
  background-color: red;
  position: fixed;
}

.normalContent{
  min-height: 900px;
  background-color:green;
}

我也做了一个jsFiddle为了这。知道我做错了什么吗？

Answer 1

您需要向“fixedHeader”类添加一个宽度属性。我使用 calc css 函数使其 100% 减去“Wrapper”类中的填充。

.Wrapper{
     max-width: 1520px;
    margin: 0 auto;
    padding: 80px 40px;
}
.fixedHeader {
  background-color: red;
  position: fixed;
  width: calc(100% - 80px);
}

.normalContent{
  min-height: 900px;
  background-color:green;
}

参见 http://caniuse.com/#search=calc用于 calc() 兼容性