Ребенок, не заполняющий родителя

Question

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

У меня есть div, что я хочу быть ровно квадратным, поэтому я следовал совету CSS в this answer. Я также хочу, чтобы ребенок div заполнил это пространство, поэтому я выполнил все стандартные рекомендации по поводу наличия clear:bothdiv в обертке и т. Д., Но мой дочерний div все еще не заполняет родителя. Проблема заключается в том, что height: 0 родительского div - есть ли решение для этого, но при этом сохраняется точный квадрат (желательно чистый CSS, я знаю, что есть JS-решения). Пример этого составляет this fiddle.

Answer 1

Вы можете дать внутреннюю коробку в absolute положение и установить его, чтобы соответствовать краям контейнера коробки:

.box div { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    border: 1px solid black; 
    display: block; 
    background-color: rgba(0,0,0,0.1); 
} 

jsfiddle

Не уверен, если это лучше того, что вы предложили, может быть, если бы вы хотели получить контент в коробке?

Answer 2

Добавление padding-bottom: 100% к ребенку div действительно заполняет пробел и, кажется, исправление; updated jsfiddle отражает это

Answer 3

Этот трюк для чувствительных коробок работает с absolute позиционированием.

css-padding-trick-responsive-intrinsic-ratios

Так используйте absolute позиционирование внутренних дел.

.box { 
... 
    position: relative; 
} 

.box div { 
    ... 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Answer 4

Если вы не слишком обеспокоены support затем с помощью Vh, фольксваген или Vmin будет хорошей альтернативой. Поскольку высота фактически установлена, вы можете легко установить дочерний элемент для заполнения родителя.

CSS:

.parent { 
    width: 50vmin; 
    height: 50vmin; 
    background-color: blue; 
    margin: 0 auto; 
} 

.child { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
} 

HTML:

<div class='parent'> 
    <div class='child'></div> 
</div> 

Вот example. Мне нравится vmax, но это не так хорошо поддерживается как vmin, vh и vw.