Question

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

我用笔来表明问题：

这是我的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;
  }

您会看到，如果窗口大于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

固定宽度侧边栏使用超过3个定义的列

1 个答案: