CSS для нижнего колонтитула переменной высоты, который плавает в нижней части страницы (не в области просмотра)

Question

CSS для нижнего колонтитула переменной высоты, который плавает в нижней части страницы (не в области просмотра)

2

Я работаю над приложением React и пытаюсь создать нижний колонтитул, который плавает в нижней части страницы (не viewport), если для заполнения пробела недостаточно содержимого. Кроме того, высота нижнего колонтитула будет варьироваться, поскольку браузер попадает на точки прерывания медиа.

Здесь представлен высокоуровневый обзор html:

<div id="root">
  <div data-reactroot id="app">
    <div id="modal">
      ...
    </div>
    <div id="header">
      ...
    </div>
    <div id="container">
      ...
    </div>
    <footer id="footer">
      <nav class="navbar navbar-light navbar-fixed-bottom bg-faded">
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <a class="nav-link" href="/privacy-policy">Privacy Policy</a>
            </div>
            <div class="col-md-4">
              <a class="nav-link" href="/terms-of-use">Terms of Service</a>
            </div>
            <div class="col-md-4">
              <a class="nav-link" href="/contact-us">Contact Us</a>
            </div>
          </div>
        </div>
      </nav>
    </footer>
  </div>
</div>

Здесь соответствующий CSS (обратите внимание, что текущий css предотвращает переполнение страницы - я удалил неудачные попытки решить эту проблему):

#footer {
  margin-top: 10px;
  text-align: center;
}

html, body {
  margin: 0;
  height: 100%;
}

html {
  overflow: hidden;
}

body {
  overflow: auto;
}

#root, #app {
  height: 100%;
}

Кроме того, обратите внимание, что я нашел gazillion похожие вопросы об этой проблеме в Stack, но буквально ни один из них не предусматривает нижний колонтитул с переменной высотой И нижний колонтитул, который не является липким (т.е. расположен в нижней части окна просмотра).

Любая помощь будет принята с благодарностью!

lgants 10 сен. 2017, в 23:00

Источник

Теги:

html

reactjs

css

css3

footer

1 ответ

Ещё вопросы

kball · Accepted Answer · 2017-09-10T23-52-00.000Z

Итак, я не уверен на 100%, я понимаю вопрос, поэтому повторю свое понимание.

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

Предполагая, что это так, я думаю, что самый простой способ решить это - установить минимальную высоту на вашем #app не менее 100vh и использовать flexbox для расширения контейнера, чтобы заполнить дополнительное пространство, если оно существует.

Учитывая текущую структуру HTML, это будет выглядеть так:

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  flex-grow: 1;
}

Вы можете увидеть это в действии здесь: https://codepen.io/kball/pen/YxmgBL

Если мое понимание вашего вопроса/желаемого результата неверно, сообщите мне, и я сделаю еще один проход.

Ваше понимание верно; также, извиняюсь за запутанное описание - я работаю в основном на бэкэнд. Также это решение удивительно. Спасибо!