Делаем высоту контейнера flexbox 100% в React JS

Я пытаюсь создать контейнер гибкой коробки из 3 столбцов. 3-х колонная часть работает. Но я хочу, чтобы они занимали всю доступную высоту, за исключением панели приложения.

CSS

.columnContainer {
    display: flex;
    height: 100%;

}
.leftContainer {
    flex : 1;
    height: 200px;
    background-color: black;
}

.rightContainer {
    flex : 1;
    height: 200px;
    background-color: blue;
}

.middleContainer {
    flex : 3;
    height: 200px;
    background-color: green;
}

Я добавил 200 пикселей, чтобы показать эти столбцы на экране. Пробовал 100%, но ничего не показало.

И в части реакции js,

<div>
        <HomeBar />
        <div className = {'columnContainer'}>
            <div className = {'leftContainer'}>

            </div>
            <div className = {'middleContainer'}>

            </div>
            <div className = {'rightContainer'}>

            </div>
        </div>
      </div>

Нужна помощь :(

Проверьте мои ответы @Kim. Надеюсь, что это вам поможет :)

— 19.05.2018 05:40

Отвечает ли это на ваш вопрос? Как заставить React Flexbox растянуться на всю высоту экрана

— 24.05.2020 22:34

html css reactjs flexbox

19.05.2018 04:27

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

5 208

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

см. ответ Patelarpan, чтобы узнать, как это сделать

Вы должны установить высоту самого внешнего контейнера на 100%. Вот ваш фиксированный код (на основе вашего рабочий пример)

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      items: [{
          text: "Learn JavaScript",
          done: false
        },
        {
          text: "Learn React",
          done: false
        },
        {
          text: "Play around in JSFiddle",
          done: true
        },
        {
          text: "Build something awesome",
          done: true
        }
      ]
    }
  }

  render() {
    return (
       <div className = {'container'}>
        
        <div className = {'columnContainer'}>
            <div className = {'leftContainer'}>

            </div>
            <div className = {'middleContainer'}>

            </div>
            <div className = {'rightContainer'}>

            </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render( < TodoApp / > , document.querySelector("#app"))

html,
body {
  height: 100%;
}

#app {
  height: 100%;
}

.container {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.columnContainer {
  display: flex;
  height: 100%;
}

.leftContainer {
  height: 100%;
  flex: 1;
  margin: 10px;
  background-color: black;
}

.rightContainer {
  flex: 1;
  margin: 10px;
  background-color: black;
  height: 100%;
}

.middleContainer {
  flex: 2;
  margin: 10px;
  background-color: black;
  height: 100%;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id = "app"></div>

19.05.2018 04:38

Вы можете добиться этого, используя единицы измерения «vh», и это более эффективный способ, чем использование процентов, потому что вам не нужно устанавливать высоту каждого родителя на 100%, если вы хотите, чтобы высота ребенка составляла 100%.

 .columnContainer { 
   display: flex; 
   height: calc(100vh - 60px);
}

Вот пример исключения высоты панели приложения 60 пикселей из высоты области просмотра.

Но это вызовет проблемы с мобильными устройствами, где клавиатура заставляет реальный vh менять

— 27.01.2020 11:24

Ваш ответ здесь, кажется, применим к этот вопрос тоже. Спасибо за лаконичное решение!

— 24.05.2020 22:32

19.05.2018 05:37

Другие вопросы по теме

CSS Translate отключается при наведении курсора даже при использовании встроенного блока

Выравнивание изображений и текста по вертикали в css

Удаление или добавление класса в столбец в Datatables изменяет только первую страницу

Настройте гибкого брата для прокрутки под другим

Измените переменную на метод публикации при нажатии ссылки

Html-теги, отображаемые после отправки письма

Как добавить класс HTML на основе содержимого другого элемента?

Как изменить цвет в зависимости от того, что возвращается в представлении?

Как мне создать горизонтальную линию div, некоторые из которых идут вправо? Все div должны быть выровнены по вертикали

Почему расчетная высота тела при росте 100% не совпадает с фактической?

Делаем высоту контейнера flexbox 100% в React JS

Ответы 2

Другие вопросы по теме

Похожие вопросы