Как сделать HTML-div с вертикальной прокруткой после того, как его высота достигает 100% высоты страницы?

У меня есть раздел на моей странице, и у меня также есть кнопка, которая при нажатии добавляет новый <p> элемент в этом <div>, Если я продолжу нажимать кнопку, высота div превысит высоту реальной страницы, и мне придется прокрутить страницу, чтобы увидеть последний абзац, а затем прокрутить вверх, чтобы снова нажать кнопку. Я хочу, чтобы div стал вертикально прокручиваемым после того, как он достигнет высоты страницы. Это CSS, который я использовал для div:

div#messages{
width: 50%;
margin-left: auto;
margin-right: auto;
padding:20px;
border: 1px solid black;
border-radius: 3px;
overflow-y: auto;
}

Но overflow-y:auto; собственность не работает?

Что я делаю не так и как мне добиться желаемого эффекта?

Благодарю.

JSFIDDLE: https://jsfiddle.net/pm5wkgv4/

3 ответа

Решение

Тебе нужно

html,body{
    height:100%;
    margin:0;
    padding:0;
}

* { /*Or at least html, body and #messages*/
    box-sizing: border-box;
}

#messages{
    width: 50%;
    max-height: 100%;
    padding:20px;
    border: 1px solid black;
    border-radius: 3px;
    overflow-y: auto;
    position:absolute;
    top:0;
    left:25%;
    background:#fff;
}

jsfiddle: https://jsfiddle.net/vimxts/pm5wkgv4/2/

Кроме того, вы должны иметь только один идентификатор на странице, вы можете удалить div часть до #message

Будет ли это решением вашей проблемы: Plunkr

ты можешь использовать

height:60vh;

указать высоту.

Используя ответ Дэниела Ченга, если вы хотите, чтобы страница не прокручивалась, вы можете добавить: overflow: hidden,

https://jsfiddle.net/pm5wkgv4/1/

#message {
    max-height:100%;
    box-sizing: border-box;
}

html, body {
    height:100%;
    box-sizing: border-box;
    overflow: hidden;
}
Другие вопросы по тегам