Flexbox не соблюдает высоту контейнера в процентах

Простой сценарий - я бы подумал.Flexbox не соблюдает высоту контейнера в процентах

Идея заключается в том, что приложение-панель является фиксированной высотой, установленной в 56 пикселей. Содержимое DIV внизу должно заполнить оставшееся пространство - высота контейнера составляет около 320 пикселей, которая устанавливается с использованием процента от родителя.

Если я использую height:100%, то flexbox не влезает, однако, если я использую height:320px, он делает это.

Любые идеи? Высота должна быть в процентах, поскольку она заполняет отзывчивого родителя.

<header class="img-app-bar"> 
    <div class="container"> 
     <div class="app-bar"></div> 
     <div class="content"></div> 
    </div> 
</header> 

.img-app-bar { 

    .container { 

     display:flex; 
     flex-direction:column; 

     background-color:Red; 
     height:100%; 

     .app-bar { 
      flex:0; 
     } 
     .content { 
      flex:1; 

      background-color:Yellow; 
     } 
    } 
}

источник

2015-09-17 John Ohara

Пожалуйста, создайте демо вопрос, используя фрагмент кода здесь или http://jsfiddle.net сообщения ванили CSS. –

, если вы используете высоту: 100%, это не сработает, поскольку 'img-app-bar' не имеет установленной высоты - поэтому он не знает, какая высота должна быть 100% от – Pete

@Pete - и это не так. Проблема состоит в том, что он устанавливается с использованием метода соотношения сторон. Я использую padding на псевдоэлементе, чтобы дать ему высоту, поэтому, если у него не было никакого содержимого, оно все равно будет иметь высоту, но я специально не задал значение высоты. –

Проблема в том, что .img-app-bar также нуждается в высоте. В противном случае ваш .container берет высоту 0.

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

 
.img-app-bar { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    display:flex; 
 
    flex-direction:column; 
 

 
    background-color:Red; 
 
    height:100%; 
 
} 
 

 
.app-bar { 
 
    height: 56px; 
 
} 
 
.content { 
 
    flex:1; 
 

 
    background-color:Yellow; 
 
}

<header class="img-app-bar"> 
 
    <div class="container"> 
 
     <div class="app-bar"></div> 
 
     <div class="content"></div> 
 
    </div> 
 
</header>

источник

2015-09-17 13:02:29 Thomas

100% Если родительский элемент не имеет стиль высота CSS, процент высоты для ребенка это не будет работать (если не указано вы используете абсолютное позиционирование хак) - это только способ CSS работает

работа вокруг для вашей ситуации сделать следующее (вышеупомянутый абсолютное положение хак):

.img-app-bar { 
 
    position: relative; 
 
    /* the following is just for giving height without using height */ 
 
    padding-top: 300px; 
 
    background: red; 
 
} 
 
.container { 
 
    /*this seems to set a height without setting a height*/ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
.app-bar { 
 
    height: 56px; 
 
    background: green; 
 
} 
 
.content { 
 
    flex:1; 
 
    background: blue; 
 
}

<header class="img-app-bar"> 
 
    <div class="container"> 
 
    <div class="flex"> 
 
     <div class="app-bar"></div> 
 
     <div class="content"></div> 
 
    </div> 
 
    </div> 
 
</header>

источник

2015-09-17 13:22:32 Pete

Flexbox не соблюдает высоту контейнера в процентах

ответ

Смежные вопросы