Обяснение:
Это происходит потому, что тэг body имеет высоту находящегося внутри контента, поэтому ваше меню занимает свое место в потоке элементов, находясь в конце, но не с самого низа. Для опускания меню вниз не хватает контента на странице, Но!
если ему задать минимальную высоту в высоту экрана, как указано в примере, то body будет минимально на всю ширину. Теперь вы можете расположить ваше меню в самом низу body.
Задав это все флексбоксом с вертикальным направлением, вы сможете установить верхний отступ у меню с помощью margin-top, где auto будет означать все свободное пространство.
Александр, сам компилятор gulp-rigger очень примитивный, что позволяет его использовать в тривиальных задачах, но и функционал небольшой, поэтому такой фокус не пройдет.
Как альтернатива gulp-rigger-у это препроцессор Pug (ранее известный как Jade) там есть нужный вам функционал включающий условия, синтаксис простой и понятный. Единственное что у вас рабочие хтмлки будут не хтмлки а pug файлы, на выходе нужный хтмл
Vadim Rublev, вы спросили как остановить действие кнопки я ответил, но в вашем примере действие не кнопки а формы submit, вам нужен, как выше уже писали event.preventDefault();
Sector567, Можно перемешивать вектор с растром таким образом. Например в иллюстраторе рисует дизайнер иконку, сунул готовый фон, растровой картинкой, сверху пару векторных элементов. Вот так и оказывается там тэг img
Но в таком случае контейнер не будет ресайзится... хмм...
а вот если контейнер специально фиксировать, а футер накладывать поверх с белым фоном и обводкой.....
