Распределить цвет фона по ширине области просмотра - PullRequest
Новая
       26

Распределить цвет фона по ширине области просмотра

0 голосов
/ 02 ноября 2018

Я пытаюсь создать адаптивную панель навигации с CSS Grid макетом, который охватывает всю ширину области просмотра, но внутренние элементы должны быть центрированы и выровнены с другими элементами контейнера на странице.

Результат, который я хочу, отображается в приведенном ниже коде, однако я не чувствую, что это элегантное решение, так как я использовал 2 отдельных элемента <div>, расположенных друг над другом.

Один <div> предназначен для центрирования элементов, а второй <div> должен покрывать background-color по всей ширине области просмотра.

Есть ли лучший способ сделать это, используя CSS Grid layout?

[РЕДАКТИРОВАТЬ] Я ищу способ сделать технику многократного использования на нескольких элементах.

Пожалуйста, разверните фрагмент кода до полной страницы, чтобы макет отображался правильно 

.container {
  display: grid;
  grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr;
  border: 2px solid black;
  height: 100vh;
}

.nav {
  grid-area: 1 / 2 / 1 / span 4;
  height: 50px;
  background-color: grey;
  border: 1px solid red;
  position: relative;
}

.nav-underlay {
  background-color: grey;
  grid-area: 1 / 1 / 1 / span 7;
  height: 50px;
}

.content {
  grid-area: 2 / 2 / 2 / span 4;
  height: 200px;
  background-color: grey;
  border: 1px solid red;
}
<body class="container">
  <div class="nav">this box should stay aligned with the content box</div>
  <div class="nav-underlay"></div>
  <div class="content">Content box</div>
</body>

1 Ответ

0 голосов
/ 02 ноября 2018

Поскольку фоновая область, которую вы хотите расширить, предназначена только для декоративных целей (т. Е. Вы не используете эту область для передачи содержимого), вы можете использовать псевдоэлементы CSS вместо фактического элемента HTML.

Псевдоэлементы становятся элементами сетки при применении к контейнеру сетки ( подробнее ). 

.container {
  display: grid;
  grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr;
  border: 2px solid black;
  height: 100vh;
}

.nav {
  grid-area: 1 / 2 / 2 / span 4;
  height: 50px;
  background-color: grey;
  border: 1px solid red;
  position: relative;
}

.container::before {
  grid-area: 1 / 1 / 2 / 2;
  content: "";
  background-color: grey;
  height: 50px;
}

.container::after {
  grid-area: 1 / -1 / 2 / -2;
  background-color: grey;
  height: 50px;
  content: "";
}

.content {
  grid-area: 2 / 2 / 2 / span 4;
  height: 200px;
  background-color: grey;
  border: 1px solid red;
}
<body class="container">
  <div class="nav">this box should stay aligned with the content box</div>
  <div class="content">Content box</div>
</body>

jsFiddle demo

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...