Блог

Итак, я пытаюсь создать список задач с помощью библиотеки javascript React.

Проблема

Я пытаюсь разделить раздел экрана веб — сайта на 2 div. который, один находится наверху на 50%, а другой-внизу на 50%. Однако,

 .top{  width: 50%;  float: top; }  .bottom{  width: 50%;  float: bottom; }  

кажется, не работает..

Я пытался

Добавление html, body { height: 100%; }

Добавление .App {text-align: center;margin:0;height:100%;}

и это не дает никаких изменений.

Пример

 import React from 'react' import './App.css'; import Navigation from './components/ToDoNav';  function App() {  return (  lt;div className="App"gt;  lt;Navigation/gt;  lt;div className="top"gt;  lt;h1gt;Copylt;/h1gt;  lt;/divgt;  lt;div className="bottom"gt;  lt;h1gt;Designlt;/h1gt;  lt;/divgt;  lt;/divgt;  ); }  export default App;  

App.js

 .App {  text-align: center;  margin:0;  height:100%; }  html, body {  height: 100%; }  .top{  height: 50%;  float: top; }  .bottom{  height: 50%;  float: bottom; }  .App-logo {  height: 40vmin;  pointer-events: none; }  @media (prefers-reduced-motion: no-preference) {  .App-logo {  animation: App-logo-spin infinite 20s linear;  } }  .App-header {  background-color: #282c34;  min-height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  font-size: calc(10px   2vmin);  color: white; }  .App-link {  color: #61dafb; }  @keyframes App-logo-spin {  from {  transform: rotate(0deg);  }  to {  transform: rotate(360deg);  } }  

Приложение.css

Результат

Вы должны добавить высоту 100 вч в тег обертки (.App).

 .App {  text-align: center;  margin:0;  height:100vh; }