Я пытаюсь заставить элемент #output заполнить мертвое пространство страницы, но все ответы, которые я нашел в Интернете, предполагают использование min-height: 100vh каким-либо образом, но это не учитывает навигационную панель (скопировано с веб-сайта Bootstrap).
Окончательная версия должна иметь <nav>, .container уместиться на остальной части экрана и #output внутри него, занимая остальную часть контейнера пространство не занято <img> и <div> - в целом, без переполнения.
JSFiddle: https://jsfiddle.net/Lfyh2bz9/1/
(Примечание: я знаю, что нужно было делегировать стиль в отдельный файл CSS, но я просто пытаюсь сначала заставить его работать :))
Как бы вы это сделали? Вы бы сделали <nav> a .container и использовали бы flexbox? Вы бы преобразовали единицы .container в rem, например <nav>? Или, может быть, рассчитать оставшуюся высоту, используя CSS?
Заранее спасибо, --J.
Изменить: даже принудительное использование элементов контейнера на 25% -50% -25% (ИЛИ принуждение вывода к высоте 3 разрыва строки!) будет работать, если это процент от самого контейнера!