Как сделать 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
Используя ответ Дэниела Ченга, если вы хотите, чтобы страница не прокручивалась, вы можете добавить: 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;
}