• Почему не отображается элемент с 100% высотой/шириной?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Это из раздяда, "хотите фокус покажу?"
    Уберите height: 100%; у .header, все будет хорошо.

    Почему так происходит:
    С шириной браузеру всё более или менее понятно.
    А вот высота зависит от контента.
    Вы дочернему элементу говорите "стань высотой в 100% родителя", а родителю говорите "растянись по высоте дочернего". Браузер не понимает что же ему делать и что от чего считать.
    Т.е. высоту дочернего можно указать в %, если у родителя есть указанная в явном виде высота (не важно в каких единицах измерения).
    Можно для html указать высоту в % и они будут считаться от высоты вьюпорта (а её браузер знает, она четкая и понятная) и дальше передавать ее дочерним.

    С флексами все проще. Для них по умолчанию align-items stretch, т.е. элементы растягиваются вдоль поперечной оси (по вертикали если главная ось идет по горизонтали (row)).
    Если перестать указывать флек-элементам высоту, то они растянутся на всю высоту строки. У вас строка одна, значит на всю высоту родителя для которого у вас указана минимальная высота.

    p.s. не вполне понятно, какую задачу вы пытаетесь решить, поставив рядом header и main.
    Вообще, думаю, что вам нужны гриды и вот это Footer не опускается вниз страницы. Появляется скролл. Как это исправить?
    Ответ написан
    Комментировать
  • Как поменять путь сохранения файла style.css в visual studio code при создании sass файла?

    @Jesu3 Автор вопроса
    Проблему решил указав в параметрах пользователя.
    "liveSassCompile.settings.formats": [
    {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
    }
    ]
    Ответ написан
    3 комментария
  • Хочу повернуть кнопку в зависимости от положения блока, как это сделать?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('.btn-show').on('click', function() {
      $(this).toggleClass('.flip');
    });

    Во-первых, строка, передаваемая в метод toggleClass, должна содержать имя класса, а вовсе не соответствующий селектор. Так что просто 'flip', без точки.

    Во-вторых, вы пытаетесь назначить обработчик клика несуществующим элементам, так что код внутри обработчика никогда не будет выполнен. У вас уже есть делегированный обработчик клика для .btn-show - вот там и дёргайте toggleClass.
    Ответ написан
    1 комментарий