具有完整内容高度的布局

Question

有人可以帮助我使用 React JSX 和 Tailwind CSS 构建一个全高的布局，包括顶部的导航栏、左侧边栏和内容区域吗？我已经开发了这个，但我在代码上遇到了困难。如果有人可以帮助我实现它，请。

import React, { useState } from 'react';
import './App.css';
import Sidebar from "./components/sidebar";
import Navbar from "./components/navbar";

import SmallCard from "./components/smallcard";
import  { smallcardData } from "./data/smallcardData";

function App() {
  return (
    
    <div className="flex  flex-col h-screen   ">
     
     <div className="  ">
          <Navbar/>
        </div>
     
      <div className="flex flex-grow    ">
       
      <div className=" w-32 h-full flex  items-center justify-center hidden md:block bg-[#f59e0b] ">
        <Sidebar />
      </div> 
        {/* Content */}
        <div className="flex-grow    ">
        
        </div>
      </div>
    </div>
  );
}

export default App;

如果有人可以帮助我实现它，请。

Answer 1

你可以尝试这个来实现它：

function App() {
  return (
    <div className="h-screen  flex flex-col">
      <div className="  ">navbar</div>
      <div className="flex flex-1">
        <div className=" w-32 h-full bg-[#f59e0b] ">Sidebar</div>
        <div className="h-full flex-1">content</div>
      </div>
    </div>
  );
}