ARTICLE AD BOX
I'm trying to create a full-height element with a visible border. I've set height of wrapper element to 100vh and added a border to it. The top, left and right borders show correctly, but the bottom border is not visible in the viewport.
Why is the bottom border hidden, even though I'm using box-sizing: border-box and height: 100vh? How can I ensure the bottom border is fully visible?
I've tried changing height to calc(100vh - 2px) but I feel there should be a cleaner solution.
Here is my code:
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-content {
height: 100vh;
background-color: #000000;
}
.wrapper {
height: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="main-content">
<div class="wrapper">
</div>
</main>
</body>
</html>
UPD: providing a screenshot
