Как сделать так, чтобы нижний колонтитул оставался внизу страницы с помощью flex-box - PullRequest
Новая
       25

Как сделать так, чтобы нижний колонтитул оставался внизу страницы с помощью flex-box

0 голосов
/ 05 апреля 2019

В iOS Safari, когда я создаю div, это гибкий элемент, а также делает его гибким контейнером, его высота не растягивается, чтобы соответствовать его содержимому.Однако, если он не сделан из гибкого контейнера, его высота растягивается, чтобы соответствовать его содержимому.

Для уточнения - я использую css flexbox, чтобы поместить нижний колонтитул внизу страницы.Тело страницы имеет два элемента div - «maincontents» и «footer».Даже если в div «maincontents» мало или нет содержимого, нижний колонтитул все равно останется в нижней части окна.И если div «maincontents» имеет много контента, он может сдвинуть нижний колонтитул по мере необходимости.Эта идея была легко реализована во flexbox, сделав тело страницы флекс-контейнером и установив для «maincontents» значение «flex: 1» и «footer» в значение «flex: 0», чтобы «maincontents» занимал все доступное пространство, а«нижний колонтитул» выдвигается к нижней части окна.Он хорошо работает во всех современных браузерах, включая iOS Safari.

Проблема возникает, если я также сам делаю «maincontents» во флексбоксе (используя display: flex).В iOS Safari нижний колонтитул теперь всегда остается в нижней части окна, даже если в основном контенте много контента, который должен еще больше подтолкнуть нижний колонтитул;вместо этого «maincontents» в конечном итоге продолжает находиться под «нижним колонтитулом», а не толкает его вниз.

Я сделал макет barebones этого на jsfiddle.https://jsfiddle.net/8xs1rocu/

Вот что вы увидите, если откроете эту скрипку на рабочем столе окна (chrome / ff / ie11) enter image description here

И вот чтовы бы увидели, открываете ли вы его на ipad или iphone (сафари).enter image description here

Обратите внимание, что в iOS-сафари нижний колонтитул не вытесняется контентом, и вместо этого контент попадает под него .Это не происходит в Chrome / FF / IE11 на рабочем столе;в этих браузерах нижний колонтитул сдавливается содержимым «maincontents».

Если вы удалите строку «display: flex», то она отлично работает и в ios safari, так же, как и в других браузерах.Однако мне нужна эта строка «display: flex», потому что я буду помещать другой контент в «maincontents», который должен быть определен определенным образом с помощью css flexbox.

Вставка кода фрагмента jsfiddle прямо здесь: 

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.maincontents {
  flex: 1;
  display: flex; /* if you remove this line it works on Safari */
}

.footer {
  flex: 0;
  background-color: green;
}
<html>
  <head></head>
  <body>
    <div class="maincontents">
      Main contents1 <br />
      Main contents2 <br />
      Main contents3 <br />
      Main contents4 <br />
      Main contents5 <br /> 
      Main contents6 <br />
      Main contents7 <br />
      Main contents8 <br />
      Main contents9 <br />
      Main contents10 <br />
      Main contents11 <br />
      Main contents12 <br />
    </div>
   
    <div class="footer">
      Footer1 <br />
      Footer2 <br />
      Footer3 <br />
      Footer4 <br />
      Footer5 <br />
      Footer6 <br />
      Footer7 <br />
    </div> 
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

После дальнейшего изучения я нашел решение вашей проблемы. С информацией, я надеюсь, вы можете внести следующие изменения: 

html, body {
  height: 100%;
  width: 100%;
}

.maincontents {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.footer {
  flex: 0;
  background-color: green;
}
<html>
<head></head>
<body>
  <div class="maincontents">
    Main contents1 <br />
    Main contents2 <br />
    Main contents3 <br />
    Main contents4 <br />
    Main contents5 <br /> 
    Main contents6 <br />
    Main contents7 <br />
    Main contents8 <br />
    Main contents9 <br />
    Main contents10 <br />
    Main contents11 <br />
    Main contents12 <br />
  </div>

  <div class="footer">
    Footer1 <br />
    Footer2 <br />
    Footer3 <br />
    Footer4 <br />
    Footer5 <br />
    Footer6 <br />
    Footer7 <br />
  </div>
  
</body>
</html>

Я тестировал Safari и Chrome и работает, как вы ожидаете. Ниже приводится jsfiddle https://jsfiddle.net/1o3904xh/12/

Я настоятельно рекомендую всем, кто смотрит на это, чтобы нижний колонтитул оставался внизу страницы, а любой контент, оставшийся выше, делал это следующим образом. Это правильная семантика, которая обеспечивает повышение SEO и доступности. С этим макетом это должно поставить вас в очень хорошее положение для вашей веб-страницы.

Подробнее об элементах HTML5 можно прочитать здесь 

html, body {
  width: 100%;
  height: 100%;
}

article {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

main {
  flex-grow: 1;
}

header, main, footer {
  flex-shrink: 0;
}

.footer {
  background-color: green;
}
<html>
  <body>
    <article>
      <header></header>
      <main>
        <div class="maincontents">
          Main contents1 <br />
          Main contents2 <br />
          Main contents3 <br />
          Main contents4 <br />
          Main contents5 <br />
          Main contents6 <br />
          Main contents7 <br />
          Main contents8 <br />
          Main contents9 <br />
          Main contents10 <br />
          Main contents11 <br />
          Main contents12 <br />
          Main contents13 <br />
          Main contents14 <br />
          Main contents15 <br />
          Main contents16 <br />
        </div>
      </main>
      <footer>
        <div class="footer">
          Footer1 <br />
          Footer2 <br />
          Footer3 <br />
        </div>
      </footer>
    </article>
  </body>
</html>

Надеюсь, это поможет вам.

0 голосов
/ 06 апреля 2019

Решение сделать эту работу в iOS Safari состояло в том, чтобы добавить flex-shrink: 0 к maincontents div.

Я изменил 

.maincontents {
     flex: 1;
     display: flex;
}

на 

.maincontents {
     /* flex: 1*/       /* removed this */
     flex-grow: 1;      /* added this */
     flex-shrink: 0;    /* added this */
     display: flex;
}

Если честно, я не уверен, почему это сработало.Значение по умолчанию flex-shrink: flex-shrink: 1.Казалось бы, в Safari, если div является одновременно и flex-элементом, также является flex-контейнером с flex-shrink: 1, div не будет растягиваться, чтобы соответствовать его содержимому.Это может быть ошибкой Safari, так как это не происходит в Firefox / Chrome / IE на рабочем столе, но также появляется в Opera на рабочем столе (что довольно странно, поскольку Opera использует тот же движок рендеринга, что и Chrome, который не имеетЭта проблема).Может быть, кто-то еще может предложить объяснение, почему эта настройка была необходима в Safari и Opera, но не в Chrome, Firefox или IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...