Ребенок не отвечает на процентную высоту

Question

Так что я работал над веб-сайтом, когда сталкивался с проблемой моего нижнего колонтитула, не оставаясь внизу моего контейнера div (нижний колонтитул не был внутри контейнера, он был помещен после него в HTML). Я понял, что это связано с тем, что некоторые дочерние div были перемещены, поэтому мне пришлось переполнять: auto на контейнере - ОДНАКО, потому что мне нужны были дети, чтобы иметь процентные высоты, у меня была высота на 100%, и, как вы, вероятно, знать переполнение: авто + указана высота = полоса прокрутки. Но, имея только минимальную высоту, не позволил бы дочерним divs получить их высоту. Иметь, конечно, не сработает.

Я воссоздал проблему в некоторых отдельных файлах тестирования, избавляясь от ненужного CSS (хотя я уверен, что некоторые все еще остаются), поэтому я мог визуализировать проблему без беспорядка. It's on this JSFiddle currently. У меня уже есть высота, потому что в идеале я не буду ее использовать.

Вот мой контейнер DIV CSS:

#container { 
    position: relative; 
    width: 70%; 
    /*height:100%;*/ 
    min-height: 100%; 
    overflow: auto; 
    margin: 0 auto; 
    background-color:#FFDA8A; 
    } 

И одна из дочерних див, которые необходимы высота в процентах:

.featured { 
    position: relative; 
    width: 100%; 
    height: 50%; 
    background-color:red; 
} 

EDIT: Я хочу добавить, что я знаю почему это что мне было интересно, если кто-то наткнулся на способ только для CSS. Если он не может быть процентами, тогда я буду искать в flex-box (как упоминалось PiniH, спасибо!).

Answer 1

Это старый вопрос, на самом деле не очень хороший ответ, обычно, когда материал становится таким, вы должны использовать flex-боксы в конце, свойство min-height не повлияет на детей, если только это не таблица, а затем получает беспорядок.

Вы можете добавить:

#container { 
    position: relative; 
    width: 70%; 
    /*height:100%;*/ 
    min-height: 100%; 
    height: 1px; 
    overflow: auto; 
    margin: 0 auto; 
    background-color:#FFDA8A; 
    } 

Но тогда она не будет расти, который я думаю, почему вы использовали мин-высота в первую очередь.

Я некоторое время ошеломлял свой разум вокруг этого, в конце концов, я думаю, что гибкий ответ - единственный ответ в этом случае.