React - Component Full Screen (с высотой 100%)

Я застрял в отображении компонента React с именем "home", который занимает 100% высоты моего экрана. Независимо от того, что я использую CSS или React встроенный стиль, он не работает.

В приведенном ниже примере html, тело и #app установлены в высоту: 100% в CSS. Для .home я использовал встроенный стиль (но все, что я использовал CSS или встроенный стиль, было одинаковым): введите описание изображения здесь Проблема, похоже, исходит от <div data-reactroot data-reactid='1'>, которая не задана с высотой: 100%.

Если я взломал его с помощью инструмента разработчика Chrome, он работает: введите описание изображения здесь

Итак, каков правильный способ отображения компонента полной высоты в React?

Любая помощь приветствуется:)

ОТВЕТЫ

Ответ 1

html, body, #app, #app>div {
  height: 100%
}

Это гарантирует, что вся цепочка будет height: 100%

Ответ 2

Это раздражает меня в течение нескольких дней. И, наконец, я использую селектор свойств CSS для его решения.

[data-reactroot] 
        {height: 100% !important; }

Ответ 3

Вы также можете сделать:

body > #root > div {
  height: 100vh;
}

Ответ 4

Хотя это не может быть идеальным ответом, но попробуйте это:

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

Он сохраняет размер, привязанный к границам, что не является тем, что вы хотите, но дает вам тот же эффект.

Ответ 5

попробуйте <div style = {{height:"100vh"}}> </div>

Ответ 6

body{
 height:100%
}

#app div{
height:100%
}

это работает для меня..

Ответ 7

Добавление этого в голову index.html работало для меня:

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>

Ответ 8

Мне удалось это с помощью класса CSS в моем app.css

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

Примените его к корневому элементу в вашем методе render()

render() {
   return ( <div className="fill-window">{content}</div> );
}

Или встроенный

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}

Ответ 9

Для проекта с использованием CRNA я использую это в index.css

html, body, #root {
  height: 100%;
}

а затем в моем App.css я использую это

.App {
  height: 100%;
}

а также установите высоту в 100% для div в App, если он есть eg-

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

Ответ 10

Несмотря на использование здесь React - расположение элементов является полностью html/css функцией.

Основная причина проблемы заключается в том, как работает свойство height в css. Когда вы используете относительные значения для высоты (в%) - это означает, что высота будет установлена относительно его родителя.

Так что если у вас есть такая структура, как html > body > div#root > div.app - чтобы div.app высоту 100%, все его предки должны иметь высоту 100%. Вы можете поиграть со следующим примером:

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}
<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

Ответ 11

У меня была та же проблема с отображением высоты моей боковой навигационной панели до 100%.

Мои шаги, чтобы исправить это было:

В файле index.css ------

.html {
height: 100%;
}
.body {
height:100%;
}

В sidePanel.css (это давало мне проблемы):

.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

Другие атрибуты были убраны для ясности, но я думаю, что проблема заключается в масштабировании высоты до 100% во вложенных контейнерах, например, как вы пытаетесь масштабировать высоту в ваших вложенных контейнерах. Высота родительских классов должна быть применена на 100%. - Что мне любопытно, так это то, почему исправлено: положение исправляет масштаб и терпит неудачу без него; это то, чему я научусь в конце концов с еще большей практикой.

Я работаю с реакции уже неделю, и я новичок в веб-разработке, но я хотел бы поделиться обнаруженным мною исправлением с масштабированием до 100%; Я надеюсь, что это поможет вам или любому, у кого есть подобная проблема. Удачи!

Ответ 12

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

{ height : 100% !important; }

также вы можете указать значения в VP, который установит высоту для пикселя порта viee, который вы упомянете как height : 700vp;, но это не будет переносимым.