Я создал простой веб-сайт на основе колб с некоторым HTML:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href={{ url_for('static', filename='common.css') }}>
</head>
<div id="main_div">
<form action="/login" method="post">
<br>
<input type="text" name="user_name" placeholder="Username">
<br><br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="submit" value="Login" id="button">
</form>
</div>
</html>
Это сопроводительный файл CSS:
#button {
border: .0;
background: lightgrey;
font-size: large;
color: grey;
}
html {
margin: 0;
padding:0;
width: auto;
}
head {
background: green;
}
#main_div {
height: 100vh;
width: auto;
padding:0;
margin:0;
background: transparent;
}
form {
text-align: left;
position: relative;
top: 50vh;
left: 50vw;
}
p{
text-align: left;
position: relative;
top: 50vh;
left: 50vw;
}
Я пытаюсь сделать мобильный телефон дружественным и стараюсь избегать пиксельных измерений. Проблема в том, что в режиме рабочего стола я продолжаю получать эту горизонтальную полосу прокрутки. Я не хочу просто скрыть полосу прокрутки, я хочу остаться только в области порта просмотра. Есть идеи о том, что происходит?