Question

我试图理解为什么80％和90％的高度似乎不起作用。我希望我的文本能够适应，但即使我将容器高度设为100％或calc(100vh - 150px)，尽管它确实增加了，但它并没有达到我期望的值。下面是问题的图片。

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
#bigwrap {
  position: relative;
  height: calc(100vh - 150px);
  width: 100%;
}
.container {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}
.container img {
  width: 200px;
  height: 200px;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-around;
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 100%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: space-around;
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 100%;
}
.right {
  text-align: center;
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 100%;
}
.box {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  height: 200px;
  width: 200px;
}
@media screen and (min-width: 600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 1;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 1;
    order: 3;
  }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="cat">
      <img src="cat1.jpeg" alt="cat">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
    </div>
    <div class="right">
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>

Answer 1

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

#bigwrap {
    position: relative;
    height: 100%;
}

.container {
 display: flex;
 position: absolute;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
 height: 100%;
 width: 80%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%); /* http://stackoverflow.com/q/36817249/3597276 */
}

.container img {
    width: 200px;
    height: 200px;
}

.left {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    order: 1;
    background: red;
    flex-basis: 100%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 3;
    background: green;
    flex-basis: 100%;
    height: 100%;
}

.right {
    text-align: center;
    order: 2;
    background: yellow;
    flex-basis: 100%;
    height: 100%;
}

.box {
    /* height: 200px;          Remove. This limits the height of the paragraph */
    width: 200px;
}

.box > p {
    margin-bottom: 25px;       /* create separation between text boxes */
}

@media screen and (min-width: 600px) {
    .container {
        flex-wrap: nowrap;
    }
    .left {
        flex-basis: 1;
        order: 1;
    }
    .middle {
        flex-basis: 1;
        order: 2;
    }
    .right {
        flex-basis: 1;
        order: 3;
    }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="cat">
      <img src="cat1.jpeg" alt="cat">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
    </div>
    <div class="right">
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>

使用flexbox的百分比高度

1 个答案:

jsFiddle