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

Question

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

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

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

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

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

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

Answer 1

overflow CSS Просто измените изменяемое окно на ребенок «содержание» <div>. таким образом вы изменяете размер ребенка <div>, а родительский <div> автоматически изменяет размер, чтобы сохранить его содержимое.

Кроме того, не уверен, было ли это намеренно, но у вас есть <div id ="Content" class="Content"> в вашем html и .Frame>.Contents { в вашем CSS (обратите внимание, что содержание слова имеет значение 's' в CSS).

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

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

Answer 2

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

overflow:auto; 

Answer 3

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

overflow: auto;

Answer 4

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

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

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

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

Answer 5

Я предполагаю, что ваш HTML дерево выглядит следующим образом:

• Диалог
  • Строка заголовка
  • Content

Для содержимого прокручивать используйте свойство

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