Высота: 100% перестали работать при запуске в Safari [дубликат]

avatar
curt
8 августа 2021 в 22:22
161
1
0

У меня были проблемы с выравниванием div по низу обертывающего div, поэтому я создал пример кода, чтобы протестировать его. Я заставил его работать, установив высоту на 100%. Когда я скопировал тестовый код на свой веб-сайт, он перестал работать. Затем я попытался использовать Chrome и Firefox. Это работало нормально. Не работает только в Safari. Любая идея, что может сломать его? Когда это не работает, зеленый элемент div находится напротив элемента над ним.

Моя цель состоит в том, чтобы зеленый элемент div находился на одном уровне с нижней частью, как показано в тесте. Любой другой способ сделать это меня устраивает. До этого решения я пробовал разные вещи.

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%
}
.mf6 {flex: 0 0 50%;}

.theme-split-1 { background-color: #a7ef76; color: black }
<div class="flex-row">
  <div class="mf6" style="border-bottom: 6px solid black">
    <div class="flex-col" style="border-bottom: 6px solid blue">
      <div class="mf6">
        <p>Our students set the bar</p>
      </div>

      <div class="mf6 theme-split-1" style="align-self: stretch">
        <p>Programs such as </p>
      </div>
    </div>
  </div>

  <div class="mf6">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
</div>
Источник
curt
8 августа 2021 в 22:25
0

Я видел еще один пост с кнопками для codepen. Я не могу найти информацию о том, как отформатировать его, чтобы они отображались. Я получил формат из вопроса meta.stckoverflow.

curt
8 августа 2021 в 22:35
0

Неважно, я перепутал это с фрагментом кода, который я добавил.

Michael Benjamin
9 августа 2021 в 03:09
1

coderhelper.com/q/33636796/3597276

Michael Benjamin
9 августа 2021 в 03:10
0

coderhelper.com/q/35137085/3597276

Ответы (1)

avatar
ed2
8 августа 2021 в 22:31
0

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

Вот как это сделать:

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

Он покажет иерархию примененного CSS, и вы сможете увидеть и проверить, что переопределяет ваш пример CSS, и найти источник.

Проверьте вставленный DIV (класс MF6) между вашими flex-row и flex-col, вам может понадобиться поместить flex-col как прямой потомок flex-row.

Кроме того, некоторые примечания, которые также могут быть полезны:

  • У вас есть некоторый встроенный CSS, который также лучше использовать с классами, в зависимости от конкретной ситуации
  • Оформить flex-end

Что касается вашего второго выпуска (не работает в Safari), ответ заключается в том, чтобы убедиться, что у вас есть все -webkit необходимые префиксы:

  • Вам может понадобиться префикс -webkit где-то там, если вы получаете результаты в другом месте, но не в сафари.

  • Раньше вам нужно было display: -webkit-flex;, чтобы увеличить ваш display: flex;, не уверен, что все еще так.

curt
8 августа 2021 в 23:03
0

Я пробовал это как в Safari, так и в Chrome и не вижу никаких переопределений. Я щелкнул строку html в инспекторе с классом flex-col.

ed2
8 августа 2021 в 23:39
0

Я вижу 6 разных DIV для проверки.

curt
9 августа 2021 в 00:08
0

Я смотрел не в тот раздел. Однако проблема возникает только в Safari. Это нормально в Chrome и Firefox. Я собираюсь изменить свой вопрос, чтобы отразить это.

ed2
9 августа 2021 в 00:21
0

Рад, что вы нашли нужный раздел. См. раздел, посвященный совместимости с Safari.

Rob
9 августа 2021 в 10:28
0

Это ответ, который решает проблему? Или предложение по отладке?

ed2
9 августа 2021 в 12:49
0

Это ответ, сопровождаемый некоторыми дополнительными примечаниями, которые помогут в дальнейшем. Отредактировано для уточнения. Спасибо.