Создание прокручиваемого div внутри разрезаемого контейнера div

Я пытаюсь сделать div, похожий на командную строку MS Windows.

Div может быть изменен по размеру и имеет двух дочерних элементов: div-div и div.

Я хочу, чтобы контент div получал полосы прокрутки, когда он больше, чем оконный div. Я хочу, чтобы строка заголовка всегда была видимой, а не прокруткой, и чтобы она не была на вершине полос прокрутки.

введите описание изображения здесь

http://www.webdevout.net/test?0vL интерактивно демонстрирует мою проблему. Нажмите на текст содержания и добавьте новые строки. Когда для строк прокрутки добавлено достаточно строк, они не видят.

Содержимое div имеет overflow:auto set.

Установка max-height или height содержимого на 100% не работает, потому что 100% не учитывает высоту заголовка, поэтому полосы прокрутки появляются после того, как некоторые строки ушли со дна. Кроме того, полосы прокрутки, когда они появляются, скрывают перетаскиваемый большой палец на внешнем div, останавливая его, изменяя размер 🙁

Просто измените окно с изменяемым размером на дочерний контент

. таким образом вы изменяете размер дочернего

а родительский

автоматически изменяет размер, чтобы сохранить его содержимое.

Кроме того, не уверен, был ли он преднамеренным, но у вас есть

в ваших html и .Frame>.Contents { в вашем CSS (обратите внимание, что содержание слова имеет значение s в CSS ).

Я считаю, что это то, что вы ищете:

http://www.webdevout.net/test?0wE

Добавьте следующий CSS:

 .Content { overflow: auto; height: inherit; } 

Здесь вы идете: http://www.webdevout.net/test?0v-

Приветствия;)

Я предполагаю, что ваше дерево HTML выглядит так:

  • диалог
    • Заголовка
    • содержание

Чтобы прокрутить содержимое, используйте свойство CSS overflow

 .content { overflow: auto; height: inherit; } 

Добавить свойство CSS

 overflow:auto; 

Просто добавьте это в свой CSS

overflow: auto;