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”类中添加width属性。我使用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（）兼容性

Answer 2

您正在使用position:fixed这就是为什么您没有获得100％的宽度。

将宽度添加到.fixedHeader

.fixedHeader {
  background-color: red;
  position: fixed;
  width: 100%;
}

使用Flexbox Grid固定行

2 个答案: