Как использовать Flex Vertical Center и Viewport Units vh?

Question

Как использовать Flex Vertical Center и Viewport Units vh?

2

У меня простой макет страницы с вертикальным центром содержимого с использованием flex.

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

У меня также есть нижний колонтитул, высота которого простирается до нижней части страницы, используя flex: 1; ,

https://jsfiddle.net/Lvod41L2/

проблема

Если в контентном ящике достаточно содержимого, которое делает его выше страницы, нижний колонтитул не будет сдвинут в нижнюю часть и прокрутит страницу. Пример: height: 2000px;

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

HTML/CSS

<!DOCTYPE html>
<html>
      <head>
            <style>
            html, body {
                  height: 100%;
                  margin: 0;
                  padding: 0;
            }
            body {
                  display: flex;
                  flex-direction: column;
            }
            .header {
                  min-height: 40px;
                  padding: 0.8em 2em;
                  background: black;
                  color: white;
            }
            .flex-container {
                  display: flex;
                  align-items: center;
                  min-height: 70vh;
                  padding: 2em;
                  background: gray;
            }
            .content-box {
                  width: 300px;
                  height: 300px;
                  margin: auto;
                  padding: 2em;
                  text-align: center;
                  background: black;
                  color: white;
            }
            .footer {
                  z-index: 100;
                  position: relative;
                  flex: 1;
                  padding: 2em;
                  background: black;
                  color: white;
            }     
            </style>
      </head>

      <body>
            <div class="header">
                  Header
            </div>

            <div class="flex-container">
                  <div class="content-box">
                        Content Box
                  </div>
            </div>

            <div class="footer">
                  Footer
            </div>

      </body>
</html>

Matt McManis 25 фев. 2017, в 07:45

Источник

Теги:

html

css

html5

css3

flexbox

1 ответ

Ещё вопросы

Kiran Dash · Accepted Answer · 2017-02-25T07-57-00.000Z

РЕШЕНИЕ - JSFIDDLE

Добавить flex: 0 0 auto; к контейнеру

.flex-container {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 2em;
  background: gray;
  flex: 0 0 auto; /* Added rule */
}

Надеюсь, это решит проблему.