Нижнюю границу не видно при height: 100vh. Караул!

@Psoriaz · Регистрация: 13.05.2021

Студворк — интернет-сервис помощи студентам

Добрый день, граждане верстальщики! Взбрело в голову сесть за изучение веб-программирования. Узнал, что есть в CSS замечательная единица измерения как viewport height. Попытался ее использовать, однако столкнулся с печалящей особенностью данной технологии и не могу понять, кого винить.

Я попытался создать элемент, который занимает всю высоту окна, задал ему высоту в 100vh, все было просто великолепно, я не мог нарадоваться, однако, когда я из исследовательского интереса захотел добавить к элементу рамку при помощи свойства border, мое восхищение внезапно прервалось. Осматривая свою страницу, я вдруг обнаружил пропажу нижней границы. Верхняя, правая и левая границы отображаются корректно, однако нижняя находится за пределами окна.

Решив самостоятельно разобраться в проблеме, я решил задать вопрос китайскому роботу "Deepseek", который посоветовал мне использовать box-sizing: border-box, уверяя, что данное "нововведение" все исправит. Получив ответ, что я уже матерый разработчик и давно использую это свойство в своем CSS, коммунистический друг впал в ступор, так и не разрешив проблему, заставив меня появиться на этой платформе в поисках ответа.

Итак, вопрос:
Почему нижняя граница скрыта, даже если я использую box-sizing: border-box и height: 100vh? Неужели великолепный viewport height не учитывает границы при масштабировании элемента? Как мне все-таки сделать так, чтобы нижняя граница полностью отображалась?

Признаюсь честно, в голову пришла идея закостылить и сделать height: calc(100vh - 2px), однако сразу же был сделан вывод о костыльной природе этого подхода. Я верю, что есть более чистое решение и верю, что Вы, уважаемые пользователи, поможете мне к нему прийти.

Вот мой код:

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.main-content {
    height: 100vh;
    background-color: #000000;
}
 
.wrapper {
    height: 100%;
    border: 1px solid red;
}

Также прилагаю скриншот:

@rr33rr · 24.01.2026, 18:50

Сообщение от Psoriaz

Почему нижняя граница скрыта, даже если я использую box-sizing: border-box и height: 100vh? Неужели великолепный viewport height не учитывает границы при масштабировании элемента? Как мне все-таки сделать так, чтобы нижняя граница полностью отображалась?

Все должно работать.
Ваш код отобразит красный прямоугольник с черным фоном во все окно браузера.
Попробуйте обновить страницу с очисткой кэша по Ctrl+F5

Нижнюю границу не видно при height: 100vh. Караул!

@voraa · 24.01.2026, 18:51

У меня в Хроме, Эйдже и Лисе на win 11 видно
На убунте в Хроме и Лисе тоже.
Какой браузер, какая версия?

В винде такая ситуация. Если выставлен параметр скрывать автоматически панель задач, то браузер разворачивает окно по полной высоте без панели задач. А когда она снова появляется, то просто наплывает на окно браузера и закрывает его нижнюю часть.

@Psoriaz · 24.01.2026, 19:00 **[ТС]**

Сообщение от voraa

Какой браузер, какая версия?

Пробовал и в опере и в хроме, везде одинаковые симптомы. Очень странное поведение, вообще не знаю с чем его связать.

Обновлено:
Попробовал в Edge открыть, там все работает как нужно, чего нельзя сказать про хром и оперу...

Добавлено через 52 секунды

Сообщение от rr33rr

Попробуйте обновить страницу с очисткой кэша по Ctrl+F5

Пробовал, все пробовал, ничего не меняется

Добавлено через 5 минут

Сообщение от voraa

Если выставлен параметр скрывать автоматически панель задач

Панель задач закреплена

@voraa · 24.01.2026, 19:10

Сообщение от Psoriaz

Пробовал и в опере

У меня и в опере все видно.
Остается только в девтулсе смотреть, какие он там высоты принимает и реально делает.
Эффекта неверных округлений при пересчете их вещественных значений в целые пиксели нельзя полностью отвергать, но мало вероятно.

Добавлено через 6 минут
А что происходит если не разворачивать окно браузера на весь экран?

@Psoriaz · 24.01.2026, 19:14 **[ТС]**

Сообщение от voraa

А что происходит если не разворачивать окно браузера на весь экран?

В таком случае все в порядке.

Сообщение от voraa

какие он там высоты принимает и реально делает

100vh = 750.4px, также и wrapper с высотой 100% = 750.4px. То есть высоты у них одинаковые, но все равно не видно нижней границы, однако если .main-content поставить height: 749.999975585px то все в порядке. Проблема получается в браузере и том, как он пересчитывает vh в px?

@voraa · 24.01.2026, 19:55

del

Добавлено через 21 минуту

Сообщение от Psoriaz

100vh = 750.4px,

А почему 750? По скриншоту там высота порядка 770 (не с точностью до пикселя)

@Segera · 25.01.2026, 14:33

предположение, граница блок сливается с 100% экраном.
Если добавить закругление в бордер, граница будет видна

CSS
1
2
3
4
5
.main-content {
    border-radius: 30px;
    height: 100vh;
    background-color: #ff0000;
}

с другой стороны height: 100vh; - 100% высоты экрана, которая тут честно отработана.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 31.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@voraa 1257 / 1210 / 179 Регистрация: 21.01.2024 Сообщений: 5,571
	24.01.2026, 18:51
	У меня в Хроме, Эйдже и Лисе на win 11 видно На убунте в Хроме и Лисе тоже. Какой браузер, какая версия? В винде такая ситуация. Если выставлен параметр скрывать автоматически панель задач, то браузер разворачивает окно по полной высоте без панели задач. А когда она снова появляется, то просто наплывает на окно браузера и закрывает его нижнюю часть. 0