Блог

Главная - Вопросы по программированию - Почему высота ведет себя так по-разному в firefox с абсолютным div?

Почему высота ведет себя так по-разному в firefox с абсолютным div?

#css #google-chrome #firefox #absolute

#css #google-chrome #firefox #абсолютный

Вопрос:

скрипка: https://jsfiddle.net/yqL9uo63/1 /

Исходный код действительно прост. Если вы откроете вышеупомянутую скрипку в Chrome, она выглядит нормально. Высота div с абсолютным расположением по центру достаточно высока, чтобы вместить текст. Однако в firefox div простирается до самого низа контейнера. Кто-нибудь знает, что вызывает такое поведение в firefox, и что я могу сделать для обеспечения согласованности? Отображение должно быть гибким.

В Chrome все выглядит великолепно, но firefox поражает мой разум, и я не смог найти ничего в Интернете, что, казалось, имело бы ту же проблему.

Исходный код HTML:

 <div class="zero">
   <div class="one">Test</div>
</div>

CSS:

 .one {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  margin: auto
}

.zero {
  height: 100vh;
  width: 100%;
  position: relative;
}

Ответ №1:

Что я замечаю

  • diplay: felx; здесь опечатка. Это должно быть flex
  • height: fitcontent не будет работать из-за этого top: 0; bottom: 0;
  • .one чтобы быть absolute в .zero , .zero необходимо иметь position: relative;

Комментарии:

1. Спасибо за уловы на опечатку. Я обновил скрипку, и проблема, которую я описал, все еще стоит. Не могли бы вы расширить вторую пулю, которую вы сделали? Почему это не работает в firefox? Это работает в Chrome.

2. Parent .zero уже заполняет всю страницу шириной: 100%; и высотой: 100%;. Таким образом, дочерний элемент .one является абсолютным, когда он должен начинаться сверху: 0; заканчиваться снизу: 0; это означает, что .one займет всю высоту своего родительского элемента, который уже занял 100% страницы. Таким образом, height: fitcontent; не будет работать

3. Спасибо за ваше объяснение, но это все еще не дает ответа, почему это работает в Chrome, но не в safari (в Chrome высота равна только той высоте, которая необходима для размещения содержимого, в то время как в Firefox она растягивается).

4. Либо ваш браузер Chrome, либо Firefox кэшировал предыдущую версию вашего css-файла и больше не перезагружает обновления. Попробуйте очистить их последние кэши, и вы увидите, что результат будет одинаковым в обоих браузерах

5. Значит, скрипка работает у вас в firefox с моими изменениями кода? Div не растягивается до верха и низа?