使 main 占据主体的全部高度，除了标题 NextJS React

Posted 2023-03-07

【中文标题】使 main 占据主体的全部高度，除了标题 NextJS React

【英文标题】：Make main take full height of body except header NextJS React

【发布时间】：2021-11-29 04:10:07

【问题描述】：

我有一个导航元素，代码如下：

export default function Nav() 
  return (
    <>
      <header
        className=
          "bg-white flex flex-row justify-between items-center px-20 py-4 filter drop-shadow-md"
        
      >
      </header>
    </>
  );

我有一个组件在_app 中呈现为导航的兄弟：

function MyApp( Component, pageProps ) 
  return (
    <SessionProvider>
        <Nav />
        <Component ...pageProps />
    </SessionProvider>
  );


export default MyApp;

我想让Component 占据导航下方的整个页面高度。导航没有固定高度，我不想那样做。

【问题讨论】：

您能说说现在出了什么问题吗？

现在，主要是取孩子的宽度（带有一些文本的div）

@Akash 您希望组件采用全宽还是全高？不清楚，因为您在标题中提到了 width，然后在问题中提到了 height。

@juliomalves 抱歉，打错了。

【参考方案1】：

你可以使用一些 css 来解决这个问题。

  <SessionProvider>
    <Nav />
    <main>
      <Component ...pageProps />
    </main>
    <style jsx>'
      main 
        width: 100%;
      
    '
  </SessionProvider>

【参考方案2】：

这是我的建议，希望我理解正确... 我尽力解释它。希望这对您有所帮助；-) 祝您好运！

使用main 标记创建Layout.js 组件，并将className 设置为"w-full" 当你使用Tailwindcss 时如果没有（宽度：100%）

import  Fragment  from "react";
import Nav from "./Nav";

function Layout(props) 
  return (
    <Fragment>
      <Nav />
      <main className="w-full">props.children</main>
    </Fragment>
  );


export default Layout;

并将 包装成 _app.js

import Layout from "../components/Layout/Layout";

function MyApp( Component, pageProps ) 
  return (
    <Layout>
      <Component ...pageProps />
    </Layout>
  );


export default MyApp;

【讨论】：

它的高度不是宽度.. 它最初是问题中的一种类型