Центрированное поле формы регистрации с липким нижним колонтитулом, проблемы с изменением размера

Question

Вот пример того, что у меня есть на данный момент:

https://codepen.io/anon/pen/jQZpNw

Моя цель состоит в том, чтобы центрировать этот прямоугольник посередине к центру страницы, а остальныеэлементы отвечают соответствующим образом.В конечном итоге я использовал margin-top: 10%; как способ центрирования поля, но проблема с этим подходом заключается в том, что на меньших высотах браузера пользователям придется прокручивать.Он также не идеально отцентрирован.

В идеале, то, что я ищу, это:

• Центрирование прямоугольника (по вертикали и горизонтали)
• В небольшом браузереВысота центра поля должна находиться под панелью навигации с небольшим полем, чтобы исключить прокрутку в небольших браузерах.
• Закрепите нижний колонтитул с зазором между нижним колонтитулом и полем, когда высота браузера очень мала.
• Когда центральное поле расширяет свое содержимое или панель навигации расширяет свое содержимое, все остальное должно перемещаться соответствующим образом, а не перекрываться.

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

Я попробовал кучу разных вещей, чтобы заставить это работать без удачи, когда я использовал calc (), чтобы установить его вцентр на небольшой высоте браузера нижний колонтитул или панель навигации будут перекрывать окно.У меня сейчас нет идей, и CSS не моя сильная сторона.Спасибо!

Answer 1

Вы можете попробовать полный упаковщик страниц с верхним колонтитулом и разделителем, который вы хотите центрировать.Используя display:flex; с flex-direction, установленным на column и justify-content: space-between;, вы можете в основном центрировать div.Немного не получится, если ваш верхний и нижний колонтитулы имеют разные размеры, но вам не потребуется тонна медиа-запросов или кода, который сложно поддерживать.Установите min-height для оболочки на 100vh, и нижний колонтитул будет липким, если только окно не слишком короткое, чтобы вместить все части.

$('#nav-button').on('click', function(e) {
  e.preventDefault();
  $('#nav-content').toggleClass('expand');
});

header {
  background: red;
  padding: 5px;
}

header a {
  color: white;
}

#nav-content {
  height: 0;
  transition: height .3s;
}

#nav-content.expand {
  height: 300px;
}

footer {
  color: white;
  background: red;
  padding: 5px;
}

#centered-box {
  height: 200px;
  width: 200px;
  background: green;
  margin: 10px auto;
}

#wrap {
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
  <header>
    <nav>
      <a href='#' id="nav-button">Expand</a>
      <div id="nav-content"></div>
    </nav>
  </header>

  <div id="centered-box"></div>

  <footer>This is the footer</footer>
</div>

Answer 2

Используете ли вы медиа-запросы в вашем CSS?Медиа-запросы позволяют вам стилизовать элементы определенным образом, если размер окна браузера попадает в запрос.