固定宽度的侧边栏使用超过 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>

SCSS：

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

您会看到，如果窗口大于 1200 像素 - 边栏使用的空间比定义的 3 列要多。

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

Answer 1

问题是，固定元素的大小，当百分比时，是根据窗口/文档大小而不是父容器计算的。虽然您的 pageWrapper 容器的宽度最大为 1200 像素，但侧边栏始终为文档宽度的 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