Как изменить высоту фонового изображения в зависимости от содержимого страницы

Question

У меня проблемы с получением фонового изображения на весь экран, в зависимости от объема содержимого страницы.Мое приложение состоит из основного раздела и боковой панели навигации.Мои стили фонового изображения установлены в главном div следующим образом:

const styles = makeStyles(theme => ({
  backgroundStyle: {
    flexGrow: 1,
    padding: theme.spacing(3),
    height: '100vh',
    textAlign: 'center',
    backgroundImage: `url(${Background})`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    backgroundSize: "cover",
    backgroundAttachment: "fixed",
    [theme.breakpoints.down('md')]: {
      height: '100%'
    }
  }

height: '100vh' работает хорошо, пока я не выберу элемент навигации, который выходит за пределы высоты просмотра, что обрезает фоновое изображение.Установка высоты на height: '100%' исправляет это, но для элемента навигации, у которого мало контента, фоновое изображение не занимает весь экран.У меня возникают те же проблемы при переключении на адаптивное представление.

Я установил условие для обработки этого:

return <main className={navListItem === 'Topic1' ? backgroundStyle : backgroundStyle2 }>

Но мне кажется, что я повторяюсь, потому что яСоздание другого класса с именем backgroundStyle2, который содержит все те же стили, только для высоты устанавливается значение «100%» вместо «100vh»

Я думаю, что должен быть более простой способ изменить фоновое изображение в зависимости отПейджинг контента, кроме использования «100%» или «100vh», но я не могу понять это

Answer 1

Если вы хотите иметь высоту не менее 100vh, но также увеличить эту высоту в соответствии с содержимым, если высота содержимого превышает высоту области просмотра, вы должны использовать minHeight:100vh; height:100%

const styles = makeStyles(theme => ({
  backgroundStyle: {
  flexGrow: 1,
  padding: theme.spacing(3),
  height: '100%',
  minHeight:'100vh',
  textAlign: 'center',
  backgroundImage: `url(${Background})`,
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center center",
  backgroundSize: "cover",
  backgroundAttachment: "fixed",
  [theme.breakpoints.down('md')]: {
    height: '100%'
  }
}