CSS проблема с сеткой: я не могу заставить контейнер внешней сетки заполнять всю страницу - PullRequest
Новая
       35

CSS проблема с сеткой: я не могу заставить контейнер внешней сетки заполнять всю страницу

0 голосов
/ 04 марта 2020

Я уверен, что это тривиальная (и, возможно, тупая) проблема, но я не могу заставить ее работать.

Я пытаюсь использовать сетку css в своем реактивном проекте, но По какой-то причине за пределами внешнего контейнера есть огромное поле, и я не знаю, как его удалить.

Вот html: 

<div className="container">
    <div className="header">HEADER</div>
    <div className="menu">MENU</div>
    <div className="content">CONTENT</div>
    <div className="extra">EXTRA</div>
    <div className="footer">FOOTER</div>
 </div>

А вот css: 

.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas:
  ". h h h h h h h h h h h"
  "m c c c c c c c c c e e"
  "f f f f f f f f f f f f";
}


.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas: ". h h h h h h h h h h h" "m c c c c c c c c c e e" "f f f f f f f f f f f f";
}
<div className="container">
  <div className="header">HEADER</div>
  <div className="menu">MENU</div>
  <div className="content">CONTENT</div>
  <div className="extra">EXTRA</div>
  <div className="footer">FOOTER</div>
</div>

Вот как это выглядит: snapshot

Я пытался управлять маржей: margin: 0 и увеличить ширину width: 100%, но ничего не работает. Кроме того, когда я удаляю поле, он перемещает содержимое в начало, и я не могу переместить его с помощью justify-content: center или justify-self: center.

Я также использую реагирование, но я только рендеринг этого компонента, и внешний div он возвращает это .container div.

Спасибо.

РЕДАКТИРОВАТЬ: я обнаружил импорт bootstrap в файле реакции, который рендерил этот компонент, что было проблемой. Сожалею. Facepalm . Таким образом, использование width: 100vw как предложено на самом деле работает.

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Если вы используете create-реакции-приложение, удалите css, поставляемый с приложением-реакции-приложения.

В противном случае попробуйте 

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas: ". h h h h h h h h h h h" "m c c c c c c c c c e e" "f f f f f f f f f f f f";
}
0 голосов
/ 04 марта 2020

Это заполняет весь браузер. Обратите внимание, ширина: 100vw, а не ширина: 100vh: 

<div style="width:100vw; height:100vh ; background-color: red;"></div>
...