固定宽度侧边栏使用了3个以上定义的列

Question

当我使用带有susy的固定位置元素时，我遇到了一个小问题。我知道具有固定位置的元素的大小是相对于视口而不是栅格来确定的。但我不知道如何解决这个问题。

我做了一支钢笔来显示问题：

http://codepen.io/emjay/pen/vEabNQ

这是我的susy配置：

$susy: (
    columns: 12,
    gutters: 1/4,
    math: fluid,
    output: float,
    gutter-position: after,
    global-box-sizing: border-box,
    debug: (
        image: show-columns,
        output: overlay,
        toggle: top right,
      ),
);

这里是我的代码：

HTML:

  <div id="pageWrapper">
    <div id="sidebar">
      <p>
        Header
      </p>
      <p>
        Navigation
      </p>
    </div>
    <div id="content">
      <h1>
        This is just a Test Headline to demonstrate this problem
      </h1>
      <p>
        Lorem ipsum dolor sit amet, ...
      </p>
    </div>
  </div>

scs:

  body{
    background-color: black;
  }
  #pageWrapper{
    @include container(1200px left);
  }
  #sidebar{
    @include span(3 of 12 wide);
    background-color: white;
    margin-right: 0; // remove gutter on the right side
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  #content{
    @include span(9 of 12 last);
    background-color: white;
    height: 1300px; //for testing
    color: white;
  }
  h1{
    background-color: red;
  }

您将看到，如果窗口大于1200px，侧边栏将使用比定义的3列更多的空间。

我希望有人知道如何解决这个问题

Answer 1

问题是，当百分比时，固定元素的大小是基于窗口/文档大小计算的，而不是基于父容器。虽然你的pageWrapper容器可以是宽的，最大1200px，侧边栏总是文档宽度的25.42373%。

你需要做的是添加媒体查询，屏幕大小最小为1200px宽，并将侧边栏大小设置为px-25.42373%od 1200px：

@media all and (min-width: 1200px) {
  #sidebar {
    width: 305.08476px; // 1200px * 25.42373%
  }
}

请参见此处：http://codepen.io/Fowler/pen/ogMmZP