Intereting Posts
Поиск следующего встречного тега и его прилагаемого текста с помощью Beautiful Soup Удалить круглую границу по умолчанию элемента в браузере Mac OS: Chrome css высота 100% проблема Ошибка отображения радара IE Как настроить TinyMCE, чтобы позволить элементам уровня блока в тегах привязки? Логика для установки фиксированного угла при изменении размера после поворота? CSS: Существует ли ограничение на количество classов, которые может иметь элемент HTML? Автоматическая настройка фонового изображения с помощью css Игра Javascript цвет угадывания Шрифт Удивительные значки исчезли. Странные персонажи (Большая коммерция) Стиль нижнего и верхнего заполнения ввода диапазона HTML5 Как изменить текст и цвет кнопки Обзор входного файла? Я хочу добавить границу к моей кнопке при наведении курсора, не перемещая кнопку или что-нибудь Страtagsя исправления ошибок в IE6? Как создать страницу 404 на сервере WAMP

Высота неверна в элементах flexbox в Chrome

У меня есть тонкая проблема для любого гуру CSS там. Мой зеленый div имеет гибкую высоту, занимая оставшиеся. И теперь я хочу поставить div внутри этого div, который должен быть половиной зеленого div. Но похоже, что Chrome относится к нему как к половине всей страницы, а не к элементу flex.

http://jsfiddle.net/unh5rw9t/1/

HTML

 
2
2.1

CSS

 html,body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column; height: 100%; } #menu { height: 70px; background-color: purple } #content { flex: 1; height: 100%; background-color: green; } #half_of_content { height: 50%; background-color: yellow; } #footer { height: 100px; background-color: cyan } 

Вы можете абсолютно div id="half_of_content" .

 #content { flex: 1; height: 100%; background-color: green; position: relative; /* new */ } #half_of_content { height: 50%; background-color: yellow; position: absolute; /* new */ width: 100%; /* new */ } 

DEMO

Что касается вашего заявления:

Но похоже, что Chrome относится к нему как к половине всей страницы, а не к элементу flex.

Вы дали body height: 100% . Затем дал своему ребенку ( .wrapper ) height: 100% . Затем дал своему ребенку ( .content ) height: 100% . Таким образом, они равны по высоте. Придание следующего ребенка ( #half_of_content ) height: 50% , естественно, будет 50% высоты body .

Однако при абсолютном позиционировании вам не нужно указывать высоты родителя .

@Michael_B объяснил, почему Chrome ведет себя так:

Вы дали body height: 100% . Затем дал своему ребенку ( .wrapper ) height: 100% . Затем дал своему ребенку ( .content ) height: 100% . Таким образом, они равны по высоте. Придание следующего ребенка ( #half_of_content ) height: 50% , естественно, будет 50% высоты body .

Тем не менее, Firefox не согласен, потому что на самом деле эта height: 100% .content игнорируется и ее высота вычисляется в соответствии с flex: 1 .

То есть, Chrome разрешает процент по отношению к значению свойства height родителя. Firefox делает это в отношении разрешенной гибкой высоты родителя.

Правильное поведение – это Firefox. Согласно определенным и неопределенным размерам ,

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

Ниже приведено обходное решение для Chrome:

 #content { display: flex; flex-direction: column; } #content::after { content: ''; flex: 1; } #half_of_content { flex: 1; height: auto; } 

Таким образом, доступное пространство в #content будет равномерно распределено между #half_of_content и ::after #half_of_content .

Предполагая, что у #content нет другого контента, #half_of_content будет 50% . В вашем примере у вас есть 2 , и это будет немного меньше, чем 50% .

 html, body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column; height: 100%; } #menu { height: 70px; background-color: purple } #content { flex: 1; height: 100%; background-color: green; display: flex; flex-direction: column; } #content::after { content: ''; flex: 1; } #half_of_content { flex: 1; background-color: yellow; } #footer { height: 100px; background-color: cyan } 
 
2
2.1

Вложенные flexboxes немного глючные. Я немного переработал вашу разметку, добавив внутреннюю оболочку с display: flex; который, кажется, выполняет эту работу. Вот скрипка (также использующая имена classов вместо идентификаторов).

 
2
2.1
.wrapper-inner { position: absolute; display: flex; flex-direction: column; height: 100%; width: 100%; }

Fix:

on #content set

 display: flex; flex-flow: column nowrap; justify-content: flex-end 

on #half_of_content set flex: 0 0 50% ;

Caveat: вам нужно добавить extra div в качестве дочернего элемента #content .

Вот полный пример:

 html,body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column; height: 100%; } #menu { height: 70px; background-color: purple } #content { flex: 1; height: 100%; display:flex; flex-flow: column nowrap; justify-content: flex-end; background-color: green; } #half_of_content { flex: 0 0 50%; background-color: yellow; } #footer { height: 100px; background-color: cyan } 
  
2
2.1