Как заставить этот макет столбца flex-direction работать в Mobile Safari? - PullRequest
Новая
       39

Как заставить этот макет столбца flex-direction работать в Mobile Safari?

1 голос
/ 10 марта 2020

Я пытаюсь добиться определенного flex-direction: column макета для веб-страницы; Он работает во всех браузерах настольных компьютеров, но в Mobile Safari он выглядит неправильно.

Вот пример макета с необходимым HTML / CSS, чтобы продемонстрировать то, что я ищу: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,
            body {
                height: 100vh;
                margin: 0;
                padding: 0;
            }

            p {
                margin: 0;
                padding: 0;
            }

            .container {
                display: flex;
                flex-direction: column;
                height: 100vh;
            }

            .header {
                background: green;
                height: 150px;
            }

            .content {
                background: gray;
                flex: 1 0 auto;
                min-height: 1px; /* IE11 fix */
            }

            .contentContainer {
                background: blue;
                display: flex;
                flex-direction: column;
                height: 100%;
                margin: auto;
                width: 600px;
            }

            .contentHeader {
                background: red;
                height: 75px;
            }

            .contentBody {
                background: yellow;
                flex: 1 0 auto;
                height: 0;
                overflow-y: auto;
            }

            .footer {
                background: purple;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
            </div>
            <div class="content">
                <div class="contentContainer">
                    <div class="contentHeader">
                    </div>
                    <div class="contentBody">
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                    </div>
                </div>
            </div>
            <div class="footer">
            </div>
        </div>
    </body>
</html>

Если вы загрузите его в любой браузер (например, Chrome, Firefox, Edge, IE11 и т. Д. c.), Это даст ожидаемый эффект, то есть вертикальную полосу прокрутки для Желтая часть с надписью «Здесь много контента».

Если вы загрузите страницу в Mobile Safari, желтая область не будет видна / не существует. Я подозреваю, что это из-за определения height: 0, установленного для contentBody div. Проблема в том, что если я удаляю определение height: 0, то контент растягивает всю страницу, чего я тоже не хочу.

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

Как мне добиться этого эффекта с Flexbox и сделать это работает во всех настольных и мобильных браузерах? Спасибо.

Редактировать # 1 : Обратите внимание, что хотя я установил фиксированные высоты для верхнего, нижнего колонтитула и т. Д. c. в примере на моей реальной странице нет заданных высот. Все динамично c, поэтому использование чего-то вроде calc(100% - 300px) не сработает. Спасибо.

1 Ответ

0 голосов
/ 10 марта 2020

Попробуйте набрать c высоту содержимого, 100vh - 300px (верхний и нижний колонтитулы 150px) и cal c contentBody 100% - 75px (верхний колонтитул содержимого 75px).

Вы можете редактировать css вот так: 

.content {
  background: gray;
  flex: 1 0 auto;
  min-height: 1px; /* IE11 fix */
  height: calc(100vh - 300px);
}

.contentBody {
  background: yellow;
  flex: 1 0 auto;
  height: calc(100% - 75px);
  overflow-y: auto;
}

Ссылка на jsFiddle

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

Попробуйте этот код для полной динамичности c значения высоты: 

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
}

.header {
  background: green;
  height: auto;
}

.content {
  background: gray;
  min-height: 1px; /* IE11 fix */
  height: auto;
  overflow-y: auto;
}

.contentContainer {
  background: blue;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: auto;
  width: 600px;
}

.contentHeader {
  background: red;
  height: auto;
}

.contentBody {
  background: yellow;
  height: auto;
  overflow-y: auto;
}

.footer {
  background: purple;
  height: auto;
}
<div class="container">
  <div class="header">
  header
  </div>
  <div class="content">
    <div class="contentContainer">
      <div class="contentHeader">
      contentHeader
      </div>
      <div class="contentBody">
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
      </div>
    </div>
  </div>
  <div class="footer">
  footer
  </div>
</div>
...