Элемент react навеь экран

Question

Как можно растянуть основной div элемент на вессь экран? На чистой html и css это делается при помощи добавления стиля "height:100%" к элементам html, body и необходимого div элемнта, на react этот способ не работает.

UPD

js файл в который вставляются компоненты:

import React, { Component } from "react";
import Container from "./components/Container";
import Head from "./components/Head";

export default class App extends Component {
  render() {
    return (
      <div>
        <Head />
        <Container />
      </div>
    );
  }
}

js файл в котором лежит компонент с классом "container", который я пытаюсь растянуть по высоте:

import React, { Component } from "react";
import YaMap from "./YaMap";

export default class Container extends Component {
  render() {
    return (
      <div className="container box-80">
        <h1 className="title">
          текст
        </h1>
        <div className="flex-box">
          <div className="discription">
            <p>
              текст
            </p>
          </div>
          <div className="ya-map" id="ya-map">
            <YaMap />
          </div>
        </div>
      </div>
    );
  }
}

css файл в котором я пытаюсь задать высоту элементов:

    html,
    body {
      height: 100%;
      font-family: "PT Sans", "Calibri", sans-serif;
      background: linear-gradient(170deg, white, rgb(188, 205, 212)) fixed;
    }

    .container {
      height: 100%;
      background-color: white;
    }

Все стили устанавливаются кроме высоты. Эти же условия для обычного html рабтают

Answer 1

У вас есть родительский div, для которого стили не заданы и тем самым высота дочернего .container режется. Вместо него можно использовать Fragment.

import React, { Component } from "react";
import Container from "./components/Container";
import Head from "./components/Head";

export default class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Head />
        <Container />
      </React.Fragment>
    );
  }
}

БЛОГ НА HUSL

Элемент react навеь экран

Ответы (1 шт):