Прокручиваемый div заполняет вышеупомянутую панель BottomNavigation?

Question

Я пытаюсь сделать нижнюю панель навигации с фиксированным позиционированием, а над ней - прокручиваемый блок, отображающий некоторые списки карт.

Я взял ссылку из Material-UI do c здесь и здесь , но я не мог понять, как установить div над нижней панелью навигации, чтобы он заполнил все оставшееся пространство.

Если я просто закреплю панель навигации внизу с z-index, установленным на высокое значение, нижняя часть приведенного выше div будет закрыта. И я также попытался использовать flex box, но это не сработало с фиксированной навигационной панелью внизу.

Я хочу избежать установки процентной высоты на навигационной панели и вышеупомянутом div, потому что я думаю, что не будет хорошо масштабироваться на размерах экрана. Пожалуйста, сообщите.

Answer 1

Вы можете настроить его так, чтобы он не использовал абсолютную / фиксированную позицию, поскольку вы не можете использовать определенную высоту. Однако вы можете использовать компонент flex container, который автоматически заполнит body height: 100vh;. Внутри вы поместите свой content-holder компонент, и он будет иметь стили flex:1;, поэтому он всегда будет расширяться до максимума, и overflow-y: auto;, поэтому он будет отображать полосу прокрутки в случае переполнения содержимого. Внутри content-holder у вас будет весь контент, который вам нужен.

BottomNavigation будет родным братом content-holder и всегда будет оставаться внизу.

Вы можете проверить следующее CodeSandbox , и я вставил код ниже.

import React from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import "./styles.css";

export default function App() {
  return (
    <div className="app">
      <div className="content-holder">
        <div className="content">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      </div>
      <BottomNavigation>
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    </div>
  );
}

body {
  margin: 0;
  padding: 0;
}

.app {
  font-family: sans-serif;
  text-align: center;
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content-holder {
  flex: 1;
  overflow-y: auto;
}

.content {
  /* you dont need this, it will grow based on the content */
  min-height: 200vh;
}