---
# System prepended metadata

title: Blazor FluentUI メニューアイテムが多い場合に フッターが途中に表示される 2024-01-27
tags: [Fluent UI Blazor, フッター, メニューアイテム, FluentUI, Blazor]

---

---
lang: ja-jp
breaks: true
---
# Blazor FluentUI メニューアイテムが多い場合に フッターが途中に表示される 2024-01-27

![image](https://hackmd.io/_uploads/BkC_vkM9a.png)

## プロジェクトテンプレート

![image](https://hackmd.io/_uploads/SyLavkMqa.png)

![image](https://hackmd.io/_uploads/HkcCvJG5a.png)

## 修正方法

### `NavMenu.razor.css` に以下を追加する

```css=
nav.sitenav {
    background-color: var(--neutral-layer-1);
    padding: 1.5rem 1rem;
    height: calc(100dvh - 90px);
    overflow-y: auto;
}
```

* メニューアイテムが多い場合はスクロールバーが表示されてフッターが末尾に表示されるようになる。

![image](https://hackmd.io/_uploads/BkCNdJM5p.png)



###### tags: `Fluent UI Blazor` `Blazor` `FluentUI` `メニューアイテム` `フッター`
