Ошибка переполнения пустого пространства?

Это кажется довольно распространенным и не причудливым вариантом использования, но я не сталкивался с ним раньше. Я установил ручку, но не могу воспроизвести ее там, и я рву на себе волосы, пытаясь понять, почему.

введите здесь описание изображения

Демонстрационная ручка

На левой боковой панели есть собственное окно прокрутки для списка элементов, но хотя установка overflow-y: scroll дает мне хороший прокручиваемый список, она также создает огромный блок пробелов, равный высоте списка слева, если overflow-y не было установлено проматывать. Этот пробел находится за пределами тега HTML (и потому, что этот синий фон останавливается). Итак, похоже, что-то происходит с вычислением высоты, но я просто не знаю, с чем еще можно поиграться.

В своем приложении я попытался закомментировать как overflow-y, так и display: grid в своей оболочке содержимого, и после этого пробел исчез. Но, конечно, мне нужны оба этих свойства. Нужно ли где-то устанавливать другую высоту?


css css-grid grid overflow
person redOctober13    schedule 13.12.2017    source источник
comment
Какова роль height: 1000px в элементе section?   -  person Michael Benjamin    schedule 13.12.2017
comment
Просто чтобы посмотреть, не обнаружилась ли ошибка; это ни на что не влияет.   -  person redOctober13    schedule 13.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Наконец-то я нашел проблему! Имел дело с абсолютно позиционированными элементами. Я использую пользовательские флажки, чтобы сделать заполненный квадрат вместо значений по умолчанию браузера, и часть этого кода (который я позаимствовал и изменил) заключалась в том, чтобы установить input на position:absolute, что, конечно, вывело его из нормального потока (отсюда, почему мой 100vh не имело значения). Добавление просто top: 0 все исправило. Я был бы рад, если бы кто-нибудь объяснил, почему установка top на значение по умолчанию имеет здесь значение.

введите здесь описание изображения

HTML (угловой)

<li class="flex justify-between" *ngFor="let error of hardSummary">
    <input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
    <label for="{{'h' + error.errorCode}}">
        {{error.errorCode}}
    </label>
  <span>{{error.count}}</span>
</li>

SCSS:

.m-checkbox {
  position: absolute;
  opacity: 0; // hide it
  top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD

  & + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

  // Box.
  & + label:before {
    content: '';
    margin-right: 4px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: #f4f4f4;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }

  // Box hover
  &:hover + label:before {
    background: #d8d8d8;
  }

  // Box focus
  &:focus + label:before {
    border: 1px solid #666;
  }

  // Box checked
  &:checked + label:before {
    background: #448aff;
  }

  // Disabled state label.
  &:disabled + label {
    color: #b8b8b8;
    cursor: auto;
  }

  // Disabled box.
  &:disabled + label:before {
    box-shadow: none;
    background: #ddd;
  }

  // Checkmark. Could be replaced with an image
  &:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 11px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
    transition: all 0.2s;
  }
}
person redOctober13    schedule 13.12.2017
comment
Добавление простого top: 0 все исправило. Я был бы рад, если бы кто-нибудь объяснил, почему установка top на значение по умолчанию имеет здесь значение. Ноль не является значением по умолчанию для top. Это auto. См. пункты в моем ответе здесь: stackoverflow.com/q/38679945/3597276 - person Michael Benjamin; 13.12.2017