子供の要素は、高さが固定された親コンテナではありません

Question

何らかの理由で私の子供の要素が固定された高さ1000pxのメインセクションに伸びません。

固定高さを1000pxから最大幅1000pxにする必要があります。 2つの部門間にもスペースがあります。私はそれがより流動性と伸縮性が必要です。誰でも何が起きているのか説明できますか？おかげ

body { 
 
    max-width: 1000px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.container { 
 
    min-height: 100%; 
 
    text-align: center; 
 
    background: green; 
 
} 
 

 
.main { 
 
    height: 1000px; 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
.contain { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
.top, .bottom { 
 
    z-index: 1; 
 
    top: 0; 
 
    bottom: 0; 
 
    display: block; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
} 
 

 
.top img { 
 
    background-color: red; 
 
    height: 379px; 
 
    width: 100% 
 
} 
 

 
.bottom { 
 
    background-color: yellow; 
 
    height: 379px; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <section class="main"> 
 
    <div class="contain"> 
 
     <div class="top"> 
 
     <img class="img"> 
 
     </div> 
 
     <div class="bottom"> 
 
     <div class="content"> 
 
      <h1> 
 
      eoufiwueg 
 
      </h1> 
 
      <p> 
 
      difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf 
 
      difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf 
 
      difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

Answer 1

は

.container { 
    min-height: 100%; 
    text-align: center; 
    word-wrap: break-word;/*add this property*/ 
    background: green; 
}