javascript - 子元素不拉伸(stretch)固定高度的父容器

Question

出于某种原因，我的子元素没有延伸到固定高度为 1000 像素的主要部分。

我需要能够将固定高度设为 1000 像素，将最大宽度设为 1000 像素。两个 div 之间也有一个空格。我需要它更流畅和有 flex 。谁能解释一下发生了什么事？谢谢

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