Боковая панель с фиксированной шириной использует более 3 определенных столбцов

у меня есть небольшая проблема, когда я использую элемент с фиксированной позицией с 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>

СКСС:

  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 столбца.

Я надеюсь, что кто-то знает, как это исправить. :)


css susy-compass susy-sass susy
person emjay    schedule 05.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что размер фиксированного элемента в процентах рассчитывается на основе размера окна/документа, а не родительского контейнера. В то время как ваш контейнер pageWrapper может быть шириной не более 1200 пикселей, боковая панель всегда составляет 25,42373% ширины документа.

Что вам нужно сделать, так это добавить медиа-запрос для размера экрана не менее 1200 пикселей по ширине и установить размер боковой панели в пикселях - 25,42373% от 1200 пикселей:

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

См. здесь: http://codepen.io/Fowler/pen/ogMmZP

person LorDex    schedule 05.03.2015
comment
Спасибо за ваш вклад, но мне нужен надежный способ решить эту проблему. Я думаю, что это определенный параметр или что-то в этом роде. :) - person emjay; 05.03.2015
comment
ну, вы уже перезаписываете susy way, добавляя max-width в обёртку страницы... :) - person LorDex; 05.03.2015