Магия HTML почему при значение больше height: 100vh появляется горизонтальный скролл

Question

Столкнулся с проблемой при создании пустого пректа, решил указать height: 200vh и получил проблему что появляется горизонтальный скролл, если выставлять значения 100 и меньше все окей, но если хоть на 1px больше, все ломается, что это такое?

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>s</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/e44c60444d.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="wrapper">

    </div> <!--wrapper-->
</body>

<script src="script/jquery-3.6.0.js"></script>
<script src="script/main_script.js"></script>
<!--<script src="script/scroll_up.js"></script> -->

</html>

CSS

body {
  font-family: "Lato", sans-serif;
  background-color: #fdfdfd;
}

.wrapper {
  width: 100vw;
  height: 200vh;
}

REST.CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
}

Answer 1

100vh он берет значение 'окна просмотра' и 100vw он берет значение 'окна просмотра (то есть vh- height а vw- width).

подробнее: https://doka.guide/css/vw-vh/

БЛОГ НА HUSL

Магия HTML почему при значение больше height: 100vh появляется горизонтальный скролл

Ответы (1 шт):