Semanti c -ui реагировать; нижний колонтитул внизу страницы

Question

В моем приложении React, используя semanti c -ui-реагировать, все компоненты должны быть в <Container fluid> компоненте.

CodeSandbox

    <Container fluid>
      <Navbar />
      <div className="AppContent">
        <Content />
      </div>
      <Footer />
    </Container>

и пользовательские стили в файле css, как показано ниже.

body {
  overflow-x: initial !important;
  display: inline-block;
  min-width: 100% !important;
  height: 100% !important;
}
.AppContent {
  padding: 1.5rem 2rem 1rem 2rem;
  min-height: 100%;
}

.Footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 35px;
}

Теперь я хочу использовать fotter быть в нижней части страницы.

добавление min-height:100vh делает ненужную полосу прокрутки, когда контента мало, и в этом текущем коде нижний колонтитул заканчивается концом контента, который может быть серединой страницы .

Я действительно запутался, как здесь работает CSS. Любая помощь приветствуется.

Answer 1

Ваш нижний колонтитул должен иметь абсолютную позицию вместо относительной

.Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px;
}

, а затем придать окружающему div container относительную позицию. (Вы можете добавить класс в контейнер.)

.container{
  position: relative;
  min-height: 100vh;
}

Это гарантирует, что нижний колонтитул будет абсолютно позиционирован относительно своего родителя.

Наконец, поскольку высота отступа составляет 35 пикселей, вам необходимо задать нижний отступ для AppContent, чтобы нижний колонтитул не покрывал содержимое.

.AppContent {
  background-color: rgba(229, 255, 0, 0.404);
  padding: 1.5rem 2rem 35px 2rem;
  min-height: 100%;
}