儿童元素不能拉伸固定高度的父容器

Question

由于某些原因，我的子元素不能伸展到固定高度为1000px的主要部分。

我需要能够有一个1000px的固定高度和1000px的最大宽度。两个div之间也有空格。我需要它更加流畅和有弹性。任何人都可以解释发生了什么事吗？由于

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

添加此CSS

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