Как дать ребенку div width/height 100%, если div родителя также 100% ширина/высота

Question

Я хочу, чтобы два divs имели ширину и высоту 100%. Я знаю, что дочерний div не будет работать, потому что у родителей div нет определенной высоты, но есть ли способ исправить это?

HTML:

<div class="container"> 
     <div class="child-container"> 
     </div> 
</div> 

CSS:

body 
{ 
     width: 100%; 
     height: 100; 
} 

.container 
{ 
     position: relative; 
     min-width: 100%; 
     min-height: 100%; 
     background-image: url('http://www.earthbusinessdirectory.com/web/images/london.jpg'); 
} 

.child-container 
{ 
     position: relative; 
     min-width: 100%; 
     min-height: 100%; 
     background-image: url('/images/black.png'); 
} 

Answer 1

Вы можете использовать относительные значения видового экрана и дать элемент а min-height из 100vh. (example)

_{(Это, очевидно, предполагается, что вы желаете, элемент будет 100% окна просмотра, а не родительский элемент)}

.child-container { 
    position: relative; 
    min-width: 100%; 
    min-height: 100vh; 
    background-image: url('/images/black.png'); 
} 

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

видовой экран-процентного длины по отношению к размер исходного содержащего блока. Когда изменяется высота или ширина исходного содержащего блока, они соответственно масштабируются.

В качестве альтернативы, вы можете установить высоту html элемента 100% и изменить .container элемента min-height к height. (example)

html, body { 
    height: 100%; 
} 
.container { 
    position: relative; 
    min-width: 100%; 
    /* min-height: 100%; */ 
    height: 100%; 
}