Автоматическая высота div с переполнением и прокруткой при необходимости

Я пытаюсь создать веб-сайт без вертикальной прокрутки для страницы, но мне нужен один из DIV, которые я должен расширять по вертикали до нижней части страницы (максимум), и что, когда у него есть контент, который не подходит, div должен создавать вертикальный скроллер.

У меня уже есть css для внутриdiv, вычисленного в этой скрипке, при необходимости создающей скроллер. Я также выяснил , как заставить контейнерный элемент div расти так, чтобы он занимал ровно столько места по вертикали, сколько он имеет на странице.Я просто не могу заставить их работать вместе!

имейте в виду, что в jsfiddle вы не сможете просматривать содержимое всего веб-сайта, и в этом смысле то, что вы получаете за вторую скрипку, на самом деле не показывает, что делается, но работает так, как я предполагал хотя.

Еще одно примечание: поскольку это разные скрипки, div id#container в 1-й скрипке — это div id#dcontent из 2-го примера.

Есть еще кое-что: для определенного типа контента этот div будет прокручиваться вертикально, но для другого типа контента я хочу, чтобы он прокручивался горизонтально, так как он будет иметь «ползунок» продукта, отображающий элементы горизонтально внутри этого DIV .

взгляните, пожалуйста, также на это фото, потому что так будет легче понять, что я пытаюсь сказать: ИЗОБРАЖЕНИЕ

я пробовал искать другие вопросы по этим темам, но ни один из них не охватывал всех аспектов я пытаюсь решить... :S

если есть что-то еще, что я могу предоставить, чтобы помочь вам/мне :) выяснить это, пожалуйста, дайте мне знать!

спасибо!

EDIT1: исправлены опечатки

EDIT2: добавлено изображение для объяснения