Чтобы элементы `html` и `body` занимали всю высоту страницы, включая прокручиваемую область, вам нужно задать им определённые CSS-свойства. Вы можете использовать следующие стили:
```css
html, body {
height: 100%; /* Задаем высоту на 100% для html и body */
margin: 0; /* Убираем отступы по умолчанию */
padding: 0; /* Убираем внутренние отступы по умолчанию */
}
.wrapper {
min-height: 100vh; /* Минимальная высота 100% от высоты видимой области */
border-right: 1px solid black; /* Пример границы */
}
```
### Пример использования
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Полная высота</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh; /* Гарантирует, что элемент займет всю высоту окна */
border-right: 1px solid black; /* Граница справа */
overflow: auto; /* Добавляем прокрутку, если контента больше невидимой области */
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Ваш контент здесь -->
<p>Некоторый контент. <br> Добавьте много текста, чтобы протестировать прокрутку.</p>
<p>Еще текст.</p>
<p>Еще текст.</p>
<p>Еще текст.</p>
<p>Еще текст.</p>
<p>Еще текст.</p>
<!-- Добавьте больше контента здесь для появления прокрутки -->
</div>
</body>
</html>
```
### Объяснение:
1. **`html` и `body` имеют высоту 100%**: Это обеспечивает, что оба элемента занимают всю высоту окна браузера.
2. **`.wrapper` с `min-height: 100vh`**: Этот стиль заставляет контейнер занимать как минимум 100% высоты видимой области, и если контента больше, чем высота окна, он добавит прокрутку.
3. **Граница (`border-right`)**: Указанная граница будет теперь видна, даже если контент выходит за видимую область, благодаря тому, что высота контейнера настроена правильно.
С помощью этих стилей вы сможете реализовать желаемый эффект.