어린이 요소가 고정 높이가있는 부모 컨테이너가 아닌

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; 
}