Как увеличить страницу и получить полосу прокрутки?
Я новичок и создаю веб-страницу. Всякий раз, когда я увеличиваю масштаб, на странице не отображается кнопка прокрутки, а когда доходит до> = 300%, буква разделяется на 2 строки (рис. 1). Как сделать так, чтобы страница работала статически, как на рис. 2, и при уменьшении масштаба менее 100% ширина по-прежнему составляет 100%?
#Header {
background-color: #1abbcc;
color: white;
text-align: center;
position: absolute;
width: 100%;
height: 50px;
font-size: 32px;
}
body {
margin: 0;
font-family: Tahoma;
width: 100%;
}
span {
left: 0%;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}<div id = "Header">
<span>
CSP Online Practice Environment
</span>
</div>
Ответы 1
Вот некоторые из приемов, которые помогут решить вашу проблему:
1) Мы можем улучшить стиль, удалив абсолютную позицию, вы можете определить позицию в вашем случае без установки absolute, absolute позиционируется относительно ближайшего позиционированного предка (вместо позиционирования относительно области просмотра, как fixed).
2) если нам нужно использовать absolute, мы можем исправить это с помощью медиа-запроса, такого как @media only screen and (width : 1024px) { /* Your Styles */ }, посмотрите и этот ответ, чтобы узнать больше медиа-запрос для различного увеличения
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title> CSP COPE </title>
<style>
#Header
{
background-color : #1abbcc;
color: white;
text-align: center;
width: 100%;
font-size: 32px;
}
body
{
margin: 0;
font-family: Tahoma;
width: 100%;
}
span
{
width: 100%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id = "Header">
<span>
CSP Online Practice Environment
</span>
</div>
</body>
</html>Фиксированная ширина будет работать только в фиксированной точке ... поведение масштабирования зависит от кода таблицы стилей ... например, если вы увеличиваете / уменьшаете масштаб на веб-сайте stackoverflow, вы видите, что веб-сайт с увеличением работает как отзывчивый, но когда его веб-сайт с уменьшенным масштабом будет наименьшим, как текущий вид на экране ... и для этого ваш код будет обрабатывать абсолютную, фиксированную позицию ... и создавать макет html со шрифтом в качестве соотношения сторон и порядка ... другое Мудрое решение для другого поведения, так как его поведение в браузере, например, вы не можете предотвратить масштабирование или что-то еще ... и т. д.
Я пробовал, но это не сработало. Я попытался установить ширину на какое-то конкретное число, например 1000 пикселей, тогда он работает, именно то, что я хочу при увеличении масштаба, но при уменьшении он показывает, что ширина не подходит для страницы.