Сергей Горячев

Если еще анимацию текста добавить, вообще хрен отличишь)
https://jsfiddle.net/webirus/mrfz3hmu/

1) https://jsfiddle.net/webirus/tkp9dr6L/1/

#main {
    display: flex;
    align-items: flex-end;
}

2) https://jsfiddle.net/webirus/tkp9dr6L/2/

#main {
    display: table-cell;
    vertical-align: bottom;
}

3) https://jsfiddle.net/webirus/tkp9dr6L/3/

#block1, #block2 {
    display: flex;
    align-items: flex-end;
}

С данной таблицей только одно решение.
Обернуть в div и задать ему overflow-x: scroll.
Т.е. сделать таблицу единственным элементом, который можно скроллить по горизонтали.
Тут таблица сложная и перестроить элементы не потеряв информативность нельзя.
Ну, а если хотите заморочиться, то вам сюда https://css-tricks.com/responsive-data-tables/

Тут немного сложнее, чем простой FancyBox.
Я бы посоветовал более гибкую в настройке LightGallery в связке с LightSlider.
Но нужно будет инициализировать несколько разных галерей.
Первая галерея основная, где все картинки.
А потом, при открытии модального окна инициализируется другая галерея.
А в ней уже разные ракурсы, относящиеся к одному товару.

Таблицами для старых браузеров? Вы для IE3 что ли верстаете?
Полный бред. Даже старые браузеры понимают дивы.
И старые браузеры нормально воспринимают JS, если не отключен.
А вообще, чтобы задавать высоту 100%, нужно всем родителям также задать 100%.
Но чувствую, что вы как-то неправильно подошли к решению задачи.

Ссылку нужно сделать блочным элементом.
a { display: block; } и нужно убрать там z-index: -1000;.
а также задать какие-то величины ширины и высоты.

Вопрос с подвалом решить легко благодаря flexbox и медиа-запросам.
Описывать весь код не буду, только подтолкну к мысли.
Для десктопной версии flex-direction: row; для мобильной - flex-direction: column;.

Прекратите пихать туда ссылки и прочую хрень.
Псевдоэлементы предназначены для совершенно других целей.
Сделать можно, но я лучше отвечу "Никак", чтобы не плодить говнокода.

Вариант 1

$('a).click(function(){
  $('div').show().animate({
    // а тут анимация
  });
});

Вариант 2

$('a).click(function(){
  $('div').show().addClass('animate'); // класс, который анимирует блок
});

Вместо show() у тебя наверно css(), но это сути не меняет.

Вообще, в 2017-м году, такое принято делать на SVG, конечно.
Но есть еще одно решение, которое имеет право на жизнь пока еще.
Составить карту изображения через Map Area и подсвечивать.
ru.crazysquirrel.ru/tools/generators/map-area

Сколько уже мучений прошло в интернете на эту тему.
Даже решения какие-то были, например, считать через JS все элементы фрейма в выводить сумму высот элементов.
Но нормального решения пока я не видел.
Быть может что-то изменилось)

Либо я что-то не понимаю, либо одно из двух.
На блоках с тарифом используется вообще обычный :hover.
В чем проблема-то?

.block {
    border: 1px solid #e1e1e1;
}
.block:hover {
    border-color: #59c7fb;
}

В стандартном функционале версии для печати этого нет.
Можете разработать полностью отдельную версию сайта, и там задать отступы (маргины), как советует Falseclock .
Для этого нужно будет РОВНО подогнать сайт на страницу А4, чтобы все браузеры правильно определяли.
Возможно, такая настройка есть внутри браузеров, но не у всех.
В любом случае, CSS или JS не решат вашу проблему.

Изображения будут динамические. Через box-shadow или изображением ?

box-shadow
одна тень у самого блока
вторая, например у псевдоэлемента after
z-index'ами настраиваешь порядок