Css-grid: удаление фона из контейнера - PullRequest
Новая
       7

Css-grid: удаление фона из контейнера

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

Рассмотрим следующую сетку с тремя столбцами с ограничением максимальной ширины для контейнера: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 56px minmax(56px, auto) 56px;
  max-width: 300px;
  margin: auto;
}

header {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 1 / 2;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
  grid-row: 2 / 3;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
  grid-row: 2 / 3;
}

footer {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 3 / 4;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}
<html>
  <body>
    <div class='container'>
      <header>Header</header>
      <main>Main</main>
      <aside>Sidebar</aside>
      <footer>Footer </footer>
    </div>
  </body>
</html>

В идеале, я хотел бы стереть фон верхнего и нижнего колонтитула вне контейнера, когда ширина области просмотра превышает max-width, но держать сетку и ее структуру в пределах max-width как в примере ( включая внутреннее содержимое верхнего и нижнего колонтитула).

Я рассмотрел следующие подходы:

  • Забудьте контейнер максимальной ширины, используйте полныйКонтейнер ширины с minmax'ами и позиционные полнодиапазонные дивы с фоновым цветом под верхним и нижним колонтитулами (https://codepen.io/anon/pen/OaryXj). Мне не нравится этот подход, потому что он добавляет дополнительные элементы исключительно для стиля и потому что он добавляет два дополнительных столбца (Я могу жить с этим, вероятно, используя именованные столбцы)
  • Используйте тот же подход, что и выше, но вместо добавления дополнительных div, используйте полный и верхний колонтитул с нижним колонтитулом с "padding: 0 calc ((100% - 900px)) / 2); "(https://codepen.io/anon/pen/BGvoxx). Мне также не нравится этот подход, потому что я не понимаю, почему он вообще работает, когда 100% <900px (почему не добавляется отрицательный отступ), и он добавляет дваo дополнительные столбцы в сетке. </li>

Есть еще идеи?Какая магия calc () с отрицательными полями и отступами в верхнем / нижнем колонтитуле?

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

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

body { 
 margin: 0;
 overflow-x:hidden;
}

.container {
  max-width: 300px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(56px, auto);
}

header, footer {
  background-color: grey;
  height: 56px;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}
<html>
  <body>
    <header>
      <div class="container">Header</div>
    </header>
    <div class="container grid">
      <main>Main</main>
      <aside>Sidebar</aside>
    </div>
    <footer>
      <div class="container">Footer</div>
    </footer>
  </body>
</html>

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

body {
 overflow-x:hidden;
 margin: 0;
}

.container {
  max-width: 300px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(56px, auto);
}

header, footer {
  background-color: grey;
  height: 56px;
}

aside {
  background-color: #FF0040;
  grid-column: 1 / span 1;
}

main {
  background-color: #2E64FE;
  grid-column: 2 / span 2;

}

.extend-right {
  position: relative;
}

.extend-right:after {
  content: '';
  position: absolute;
  height: 100%;
  left: 100%;
  right: -100vw;
  background-color: inherit;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}
<html>
  <body>
    <header>
      <div class="container">Header</div>
    </header>
    <div class="container grid">
      <aside>Sidebar</aside>
      <main class="extend-right">Main</main>
    </div>
    <footer>
      <div class="container">Footer</div>
    </footer>
  </body>
</html>
0 голосов
/ 30 ноября 2018

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

body {
 overflow-x:hidden;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 56px minmax(56px, auto) 56px;
  max-width: 300px;
  margin: auto;
}

header {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 1 / 2;
  position:relative;
}
header:before,
footer:before{
  content:"";
  z-index:-1;
  position:absolute;
  top:0;
  bottom:0;
  left:-100vw;
  right:-100vw;
  background:inherit;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
  grid-row: 2 / 3;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
  grid-row: 2 / 3;
}

footer {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 3 / 4;
  position:relative;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}
<html>
  <body>
    <div class='container'>
      <header>Header</header>
      <main>Main</main>
      <aside>Sidebar</aside>
      <footer>Footer </footer>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...