JSFiddle - React, Tailwind, and code Playground

by ruirui

HTML

<div id="wrapper">
  <header>
    header
  </header>
  <main>
    <div id="test">
      我是id为test的div，我设置了height: 100%
    </div>
  </main>
  <footer>
    footer
  </footer>
</div>

CSS

#wrapper {
   height: 800px;
   display: flex;
   flex-direction: column;
 }

 header,
 footer {
   height: 30px;
 }

 main {
   /* flex: 1; */
   flex-grow: 1;
   background-color: red;
   display: flex;
 }

 #test {
   background-color: yellow;
   
 }