разливочные ДИВ родителей и центр детей

Question

С довольно простой разметкой мне нужно:

• Расширяет DIV, чтобы заполнить его родителей высота
• Центр детей этого элемента по вертикали

Так #wrapper должен иметь всю возможную высоту, нажав нижний колонтитул на нижнюю часть #container. внутри внутри должны оставаться свои боны, так что только их положение изменится. (в основном будет развиваться только позиция элементов, а не их размер).

Также мне нужна совместимость с ie8 (так что безгибкой печально).

Единственный фиксированный размер, который существует, является одним из #container.

Вот фрагмент кода:

/* position */ 
 
/* any idea ? */ 
 

 
/* fixed size */ 
 
#container { height: 300px; } 
 

 
/* display purpose */ 
 
* { 
 
    border: 1px black solid; 
 
    margin: 2px; 
 
    color: #fff; 
 
} 
 
#container { background-color: #999; } 
 
#header, #wrapper { background-color: #666; } 
 
#footer, #list { background-color: #444; } 
 
#list div { background-color: #222; }

<div id="container"> 
 
    <div id="header">header</div> 
 
    <div id="wrapper"> 
 
    <div id="list"> 
 
     <div>div</div> 
 
     <div>div</div> 
 
     <div>div</div> 
 
    </div> 
 
    <div id="footer">footer</div> 
 
    </div> 
 
</div>

Я смотрел на стол дисплея, абсолютное позиционирование, :before хака, но ничего не получить это право ...

Вот codepen с таким же кодом: http://codepen.io/anon/pen/NPPVZX

Результат должен выглядеть следующим образом: http://codepen.io/anon/pen/OPPeOv

(но с возможностью больше/меньше DIV в списке и различного размера колонтитула/заголовке)

Спасибо заранее.

Answer 1

/* position */ 
#wrapper, #list, #list div { flex-grow: 1; } 

/* fixed size */ 
#container { height: 300px; } 

/* display purpose */ 
div{ 
    border : 1px black solid; 
    margin: 2px; 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
} 

#container  { background-color : #999; } 
#header, #wrapper { background-color : #666; } 
#footer, #list { background-color : #444; } 
#list div   { background-color : #222; } 

раздвоенный http://codepen.io/Logo/pen/KwwjWr

Не уверен, если это то, что вы хотите.

EDIT Извините.

/* position */ 
#wrapper { height: 91%; } 
#list { height: 90%; } 
#list div { margin-bottom: 9.9%; } 

Это использует процент, который я не уверен, поддерживает ли ie8 или нет, а то, что вы имеете в виду под «дивами внутри должен держать свою сторону», поэтому я предполагаю, что вы хотите, чтобы высота быть нетронутой #list div s.

Если это не ваш случай, то идти с

#list div { height: 31.5%; } 

EDT 2 Это еще одна попытка.

Попробуйте 1

/* position */ 
#container *, #wrapper * { max-height: 90.5%; } 
#list { padding:9.6% 0; } 

Это не полностью автоматизирован попытка, так что вы должны изменить отступы или высоту в случае, если они отличаются.

Попробуйте использовать 2 таблицы.

Короткий ответ here, но так как я добавил слишком много вещей, такие как remodifying макета (добавление слоя DIV для гнездования таблиц), и много display:table с, расположение немного нарушено (например, что поля неравномерны). Это самое лучшее, что я могу сделать.

Answer 2

Ответ с немного больше разметки, благодаря @logo, вот codepen с желаемым эффектом: http://codepen.io/anon/pen/jEPNby

/* position */ 

#header { display:table-header-group; } 
#footer { display:table-footer-group; } 
#wrapper2 { height:100%; } 
#wrapper, #list { display:table-cell; } 
#container, #wrapper2 { display:table; width: 100%;} 
#list { vertical-align: middle; } 

Еще раз спасибо!