如何使用 Nextjs 从 react-bootstrap 包 Reactjs 制作固定的 Tabbar

Question

我正在尝试让我的 Tabbar 固定位置...

我使用的包是react-bootstrap:

https://www.npmjs.com/package/react-bootstrap

https://react-bootstrap.github.io/components/tabs/

这是我的代码：

import React from 'react';
import { Tabs, Tab } from 'react-bootstrap';

const datacenter = () => {
  return (
    <div className="content-area">
      <Tabs defaultActiveKey="Dashboard" id="uncontrolled-tab-example">
        <Tab eventKey="Dashboard" title="Dashboard" className="fullheightfixed">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus amet
            eum, optio non omnis voluptate quibusdam sunt ex nulla est commodi
            unde obcaecati, corrupti maiores ab culpa quas ipsam excepturi? A
            asperiores maxime ipsam soluta inventore, velit consequatur iure
            earum adipisci odio vel sit quisquam, voluptatum, quam mollitia
            ratione. Nemo porro commodi repellat sint aperiam laudantium
            sapiente doloribus, tempora reiciendis reprehenderit! Atque
            recusandae velit dolore. Praesentium, doloremque libero consectetur
            soluta ad quas in quisquam facilis sed ipsam! Molestiae tempora
            reprehenderit odit deleniti? Odio quae eveniet tempora repudiandae.
            Repudiandae recusandae veritatis incidunt, dolorem dolorum molestias
            modi cum exercitationem nihil illo ab.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus amet
            eum, optio non omnis voluptate quibusdam sunt ex nulla est commodi
            unde obcaecati, corrupti maiores ab culpa quas ipsam excepturi? A
            asperiores maxime ipsam soluta inventore, velit consequatur iure
            earum adipisci odio vel sit quisquam, voluptatum, quam mollitia
            ratione. Nemo porro commodi repellat sint aperiam laudantium
            sapiente doloribus, tempora reiciendis reprehenderit! Atque
            recusandae velit dolore. Praesentium, doloremque libero consectetur
            soluta ad quas in quisquam facilis sed ipsam! Molestiae tempora
            reprehenderit odit deleniti? Odio quae eveniet tempora repudiandae.
            Repudiandae recusandae veritatis incidunt, dolorem dolorum molestias
            modi cum exercitationem nihil illo ab.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus amet
            eum, optio non omnis voluptate quibusdam sunt ex nulla est commodi
            unde obcaecati, corrupti maiores ab culpa quas ipsam excepturi? A
            asperiores maxime ipsam soluta inventore, velit consequatur iure
            earum adipisci odio vel sit quisquam, voluptatum, quam mollitia
            ratione. Nemo porro commodi repellat sint aperiam laudantium
            sapiente doloribus, tempora reiciendis reprehenderit! Atque
            recusandae velit dolore. Praesentium, doloremque libero consectetur
            soluta ad quas in quisquam facilis sed ipsam! Molestiae tempora
            reprehenderit odit deleniti? Odio quae eveniet tempora repudiandae.
            Repudiandae recusandae veritatis incidunt, dolorem dolorum molestias
            modi cum exercitationem nihil illo ab.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus amet
            eum, optio non omnis voluptate quibusdam sunt ex nulla est commodi
            unde obcaecati, corrupti maiores ab culpa quas ipsam excepturi? A
            asperiores maxime ipsam soluta inventore, velit consequatur iure
            earum adipisci odio vel sit quisquam, voluptatum, quam mollitia
            ratione. Nemo porro commodi repellat sint aperiam laudantium
            sapiente doloribus, tempora reiciendis reprehenderit! Atque
            recusandae velit dolore. Praesentium, doloremque libero consectetur
            soluta ad quas in quisquam facilis sed ipsam! Molestiae tempora
            reprehenderit odit deleniti? Odio quae eveniet tempora repudiandae.
            Repudiandae recusandae veritatis incidunt, dolorem dolorum molestias
            modi cum exercitationem nihil illo ab.
          </p>
        </Tab>
      </Tabs>
    </div>
  );
};

export default datacenter;

这是我在 codesandbox 中的代码：

https://codesandbox.io/s/smoosh-sound-ufkig?file=/src/App.js:353-359

Answer 1

fullheightfixed class 可以简单地采用以下属性：-

.fullheightfixed {
  overflow: auto;
  max-height: calc(100vh - 40px);
}

overflow:auto 使 Tab 中的内容在 space 不足时滚动。 space 可以通过从 100vh 中减去 tab navbar 高度来计算，这是可用视口高度的 100%。

这是一个可用的沙箱：-

如何使用 Nextjs 从 react-bootstrap 包 Reactjs 制作固定的 Tabbar

How to make a fixed Tabbar from react-bootstrap package Reactjs with Nextjs

javascript

reactjs

react-bootstrap

next.js