Сделать заголовок на 100% экрана

Я пытаюсь сделать раздел заголовка 100% области просмотра с помощью height: 100vh;. Но как-то переливается.

При поиске в devtools я вижу, что причина этой проблемы связана с моей панелью навигации. Вот структура HTML:

---body
------header
---------nav
-----------other div
----closing tags

Вот CSS:

* {
  padding: 0;
  margin: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}

body {

  background: linear-gradient(90deg, #1b1f2a 1.2%, #191d28 1%) 1px 0, #fff;
  background-size: 240px 1px;
  overflow-x: hidden;
}


header {
  height: 100vh;
}

header nav {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 4fr 1fr;
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: "brand links email";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 95%;
  margin: 50px auto 30px auto;
  padding: 10px auto;
}

Поэтому, если я изменю верхнее поле заголовка навигации на 0, переполнения не будет.

Вот ссылка на сам проект: https://www.generationz.dev/projects/portfolio1/index.html

Итак, чтобы уточнить вопрос: как мне установить раздел заголовка на 100% области просмотра без переполнения?

Спасибо.


html css css-grid
person Mendi Sterenfeld    schedule 26.09.2019    source источник
comment
вы пытались добавить высоту: 100%; под стили кузова?   -  person James De Souza    schedule 26.09.2019
comment
@JamesDeSouza, я попробовал сейчас. ничего не меняет. Я бы порекомендовал перейти по ссылке и поэкспериментировать с devtools.   -  person Mendi Sterenfeld    schedule 26.09.2019
comment
просто; header nav { margin: 0px auto 30px auto; } заголовок {padding-top:50px; }   -  person James De Souza    schedule 26.09.2019

Ответы (2)


arrow_upward
3
arrow_downward

Навигация имеет верхнее поле 50px.

header nav {
  margin: 50px auto 30px auto;
}

Заголовок установлен на height: 100vh.

Итак, вы получите переполнение, потому что: 100vh + 50px > 100%.

Вы можете удалить верхнее поле nav или вместо height: 100vh в заголовке использовать height: calc(100vh - 50px). Есть и другие варианты, такие как добавление отступов или границ. См. отрывок из MDN ниже.

Хотя nav вложено в header, верхнее поле nav отображается за пределами header из-за схлопывания полей.

Из MDN:

Как свернуть поля

Нет содержимого, разделяющего родителя и потомка.

Если нет границы, заполнения, встроенной части, созданного контекста форматирования блока или зазора для отделения margin-top блока от margin-top одного или нескольких его дочерних блоков; или без границы, отступов, встроенного содержимого, height, min-height или max-height для отделения margin-bottom блока от margin-bottom одного или нескольких его дочерних блоков, тогда эти поля схлопываются. Свернутое поле выходит за пределы родителя.

Еще один пример схлопывания поля:

person Michael Benjamin    schedule 26.09.2019

arrow_upward
0
arrow_downward

Добавьте float: left в заголовок. Тогда это сработает

header {
  float: left;
  height: 100vh;
}
person Aman    schedule 26.09.2019
comment
Хотя это может решить вопрос ОП, вам следует добавить дополнительную информацию, почему вы выбрали это решение. Кстати, поплавок не кажется подходящим методом для использования (даже если он решает эту конкретную проблему), поскольку позже он вызывает другие проблемы. - person A. Meshu; 26.09.2019
comment
Отмеченный. Спасибо за предложение. - person Aman; 26.09.2019