Есть ли лучший способ обеспечить, чтобы нижний колонтитул оставался внизу прокручиваемого div, высота которого достаточно велика, чтобы касаться нижней части экрана?

В конце поста я даю макет вопроса.

У меня есть макет с двумя столбцами, вроде боковой панели навигации, которая не всегда открыта (col0), и основной области (col1), которая всегда открыта. В основной области отображается содержимое. Наконец, у меня есть нижний колонтитул, который находится прямо под самым верхним уровнем страницы.

Внутри основной области или области содержимого находится компонент перехода, который представляет следующий маршрутизируемый компонент с использованием переходов CSS.

Что мне нужно сделать, так это сделать нижний колонтитул нижним колонтитулом, то есть быть строго внизу позиции прокрутки экрана и содержащего его div. Это не означает исправлено, потому что вы можете прокручивать.

Я хотел бы сделать это в CSS, но я не могу заставить его работать, и я чувствую небольшое искушение, чтобы он считывал высоту и обновлялся перед установкой компонента и т. Д. Есть ли лучший способ?

Вот функция react Component render(), в которой для вашего удобства удалено множество вещей:

  <div style={prepareStyles(styles.heightHundred)}>
    <ChromeHelmet />
      <AppBar ... yada .../>
      <div style={prepareStyles(styles.root)}>
        <div style={prepareStyles(styles.content)}>
          <EasyTransition
            path={this.props.location.pathname}
            initialStyle={{opacity: 0, transform: 'translateY(-100%)'}}
            transition="opacity 0.2s ease-in, transform 0.3s ease-in-out 0.3s"
            finalStyle={{opacity: 1, transform: 'translateY(0%)'}}
            leaveStyle={{opacity: 0.9, transform: 'translateY(500%'}}
          >
          { this.props.children }
          </EasyTransition>
        </div>
      </div>
      <AppNavDrawer />
    <Footer
      style={prepareStyles(styles.footer)} />
  </div>

Редактировать

Когда я пытаюсь использовать flex, я могу сказать, что он близок, но это не имеет никакого эффекта, потому что боковая панель отображается с position: fixed; и некоторыми причудливыми элементами CSS внутри компонента React, к которым я боюсь прикоснуться. Но когда я отменяю это position: fixed, нижний колонтитул оказывается там, где он должен быть, но боковая панель явно шаткая ...