sdgroup14

Грид не кроссбраузерный... лучше сделать последний элемент абсолютом а 2 flex или float или inline-block. все зависит от задачи. Мой совет абсолютом. Кстати ljutaev указал почти верное решение. :) только flex-direction не row a column если можно ограничить высоту... первые 2 друг под другом а 3тий в новой строке на 100% высоты. Опять же все зависит от задачи. Можно и без грид обойтись

https://codepen.io/sdgroup14/pen/KeGQvp?editors=1100

На работоспособность не проверял, но логика такая... Чтоб проверить по клику на сайт, что таргетом не является ваша кнопка и модалка

<style>
.modal {
  display: none
}

.modal.__show{
  display: block
}
</style>
<button type="button" class="btn">toggle Modal</button>

<div class="modal" >Modal text</div>

$('.btn').on('click', function(){
  $('.modal').toggleClass('__show');
})

$('body').on('click', function(e){
  if(e.target !== $('.modal') && e.target !== $('.btn') && $('.modal').hasClass('__show') ){
    $('.modal').removeClass('__show');
  }
})

потому что если я не ошибаюсь оутлайн является "косвенно" стилем... цвет выделения инпута и т.д. к нему транзишн не применяется. хотите красивый оутлайн - делайте через бордер

вот вопрос ваш понятен, а вот исход не логичен. У вас высота активного блока динамическая? если да, то ок, а если нет, то зачем вы 3 раза переопределяете высоту.... Вы очень код свой засоряете....
Для начала создайте нам плункер, чтоб мы увидели, зачем вы 3 раза определяете переменную для высоты, и задаете ее :)

я бы на вашем месте создал function getHeight(){} ..... а потом ее обьявлял и в ресайзе и в клике... А пример нам обязательно нужен потому что с вашего вопроса и кода должно все работать верно... Может что то стороннее мешает или что то вы не учли

https://www.npmjs.com/package/gulp-sass

вот посмотрите. Я бы вам все таки делать через консоль. Есть на это даже очень положительные причины!
Я уже 2 года пишу на scss и настроил gulp под себя очень даже удобно.
Самый главный плюс(для меня) работы через консоль, так это можно грубо сказать - дебаггинг. Я настроил свою сборку так, что если у меня ошибка в компиляции у меня вылетает окно с файлом в котором произошла ошибка и в строке.... это работает через gulp-notif.... в любой ОС. Во вторых консолью нужно учиться/пользоваться обязательно потому что помимо компиляции в css вам нужно делать production версию ваших стилей.... Я уже не говорю о остальных языках

я так подозреваю что вы у какого то блочного или инлайн элемента хотите вытащит текст или что то в этом духе. В вашем случае у div $('.text') val не существует. val существует у таких элементов как textarea и т.д... вам нужно $('.text').text(), во вторых почитайте jquery и его возможности .... у вас когда нибудь будут сложные задачи и вы будете писать много много кода parent parent parent - пользуйтесь .closest() - это самый ближайший родитель.... Чтоб не дублировать код....

он у вас и не будет работать. Во первых Я бы вам советовал почитать про область видимости переменных. Либо вы не правильно сформулировали вопрос. Либо я его не могу понять :) вы поставили setInterval через каждую секунду. он будет показывать одно и тоже значение.. Он не будет ее определять ее динамически. Опишите подробнее задачу, потому что с этого куска кода не понятно какую логику вы хотите организовать. В вопросе одно а в скрипте другое :)