如果父母的div也是100％宽度/高度，如何给孩子div宽度/高度100％

Question

我想要宽度和高度均为100％的两个div。我知道孩子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

您使用视相对值，并给该元素的100vh一个min-height。 (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%; 
}