height 100vh и лишние пиксели

308

08 июля 2017, 07:37

При использовании height:100vh; выдает какую-то лишнюю высоту. даже box-sizing:border-box; не помогает

.vh100 { 
background:red; 
height:100vh; 
box-sizing:border-box; 
}

<div class="vh100"></div>

Answer 1

Никаких лишних пикселей.

html, 
body { 
  padding: 0px; 
  margin: 0px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.vh100 { 
  background: red; 
  height: 100vh; 
}

<div class="vh100"></div>

С учетом padding и margin:

html, 
body { 
  padding: 5px; 
  margin: 5px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.vh100 { 
  background: red; 
  height: calc(100vh - 40px); 
}

<div class="vh100"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как организовать импорт макросов в Excel на C#

В институте на производственной практике дали задание - написать своего рода инсталлятор с опциями импорта-экспорта макросов в ExcelСделал...

551

При использовании INSERT в базу проекта ничего не добавляется (ADO .NET)

Есть строка подключения сгенерированная при создании подключения базы данных из проектаДля отображения использую DataGridView(WinForms)

249

Вызов и подключение программы на c++ из c#

Есть программа на c++, которая генерирует зашифрованное сообщение и выводит в файл и консольПрограмма на c# должна эти данные выводить на winforms

574

Entity и Value object на основе одного класса

Скажите, пожалуйста, в рамках подхода DDD, является ли корректным рассматривать один и тот же класс как Entity и как Value object

320