ヘッダーとフッターを固定した状態の時に、メインコンテンツが存在していなくても画面いっぱいにまで表示されるようにしたい

Question

聞きたいこと

ヘッダーとフッターが固定されたページを作成しているのですが、ヘッダーとフッターの間に存在しているメインコンテンツが、ヘッダー・フッター間全体に表示されません。

• 現状

• 理想

ソースコード

import React from "react";

export default function App() {
  return (
    <div>
      <div
        style={{
          display: "flex",
          position: "fixed",
          width: "100%",
          alignItems: "center",
          justifyContent: "center",
          margin: "0 auto",
          backgroundColor: "#F9F9F9",
          height: "114px"
        }}
      >
        <div style={{ display: "flex", alignItems: "center" }}>
          <div>Header</div>
        </div>
      </div>
      <div
        style={{
          margin: "0 auto",
          paddingTop: "114px",
          backgroundColor: "#F9F9F9",
          height: "100%",
          overflow: "auto"
        }}
      >
        Body
      </div>
      <div
        style={{
          display: "flex",
          position: "fixed",
          bottom: 0,
          left: 0,
          alignItems: "center",
          backgroundColor: "#ffffff",
          height: "96px",
          width: "100%",
          justifyContent: "center"
        }}
      >
        <div>Footer Center</div>
      </div>
    </div>
  );
}

Answer 1

bodyに下記のスタイルを設定すればどうでしょう。

min-height: calc(100vh - 114px - 96px)

Answer 2

こんばんは。

こうするとどうでしょうか？

      <div
        style={{
          margin: "0 auto",
          paddingTop: "114px",
          backgroundColor: "#F9F9F9",
          height: "100vh",
          boxSizing: "border-box",
          overflow: "auto"
        }}
      >
        Body
      </div>