У меня есть следующий div:
<body>
<div class='centre'>
<h1>Contact Me</h1>
<a class="button" href="home.html">Home</a>
<a class="button" href="About">About</a>
<p>Use this form to contact me:</p>
</div>
</body>
Я использовал следующие CSS для тела и div:
.centre{
position: absolute;
height: 90vh;
overflow: auto;
width: 90vw;
top: 50vw;
left: 50vw;
padding: 1vw;
margin-top: 20vw;
margin-bottom: 5vw;
transform: translate(-50%, -50%);
text-align: center;
background: white;
box-shadow: 0px 0px 24px #000000;
height: min-content;
}
body{
background-color: #FA8BFF;
height: 100vh;
margin: 0;
}
Поскольку я добавляю все больше и больше контента в div, поэтому содержимое не помещается на экране, высота увеличивается, но верхняя часть экрана не отображается, несмотря на указание margin-top: 20vw;. Я заметил, что это происходит только тогда, когда я изменяю размер окна, чтобы оно стало очень маленьким, но нижнее поле всегда остается неизменным. Когда я просматриваю страницу на большом мониторе, верхнее поле становится непропорционально большим и очень сильно сдвигает мое содержимое div, а нижнее поле все еще остается. Я также пытался использовать процентные значения, но они тоже вызывали проблемы.
Что мне исправить? Спасибо!