Sticky tab bar with Fluent UI’s Pivot

To get expected behavior you just need some CSS.

Set height of body and html to 100vh, and overflow: hidden to avoid multiple scrollbars.

body, html {
  height: 100vh; /* Viewport height */
  overflow: hidden; /* To avoid multiple scrollbars */
}

As a working example I’m gonna use Links of large tab style. Content of every item renders inside PivotItem Component. So, you have to put some styles on it:

const pivotItemStyles = {
  height: 'calc(100vh - 44px)',
  overflow: 'auto',
}

PivotTabs by default uses height: 44px that’s the reason why I put calculate inside height property. overflow: auto is to get scrollable content. Reference: Pivot.styles.ts

Codepen working solution