根据需要将div设为高度

Question

在下面的示例中，当右上角的div内容太高时，底部div的内容会流过顶部div的内容。

我希望顶部div向下推div，以便div中的内容在下面的情况中保持可见。

我怎么能解决这个问题？

＆＃13;

＆＃13;

.left {
  background-color: grey;
  min-height: 200px;
  float: left;
}

.right {
  height: auto;
  float: left;
}

.top {
  background-color: lightblue;
  height: 150px;
  
}

.bottom {
  background-color: lightgreen;
  height: 50px;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="right">
    <div class="top">
      top right<br/> top right<br/> top right<br/> top right<br/> top right<br/> top right<br/>top right<br/>top right<br/>top right<br/>

    </div>
    <div class="bottom">
      bottom right
    </div>

  </div>

  <div>

＆＃13;

＆＃13;

＆＃13;

修改

我之前没有提到的是默认情况下底部div应该在底部。这意味着如果有足够的空间，底部div的底线应与左侧div的底线对齐

Answer 1

您可以使用外部元素的flex row布局和右侧的column布局执行此操作。将.top和.bottom设置为flex-grow: 1会导致它们增长到与父高相匹配，如果没有足够的内容可以拉伸到父高度

＆＃13;

＆＃13;

.left {
  background-color: grey;
  min-height: 200px;
}
.top {
  background-color: lightblue;
}
.bottom {
  background-color: lightgreen;
}
/* added these */
.flex {
  display: flex;
}
.col {
  flex-direction: column;
}
.top,.bottom {
  flex-grow: 1;
}

＆＃13;

<div class="wrapper flex">
  <div class="left">
    left
  </div>
  <div class="right flex col">
    <div class="top">
      top right<br/> top right<br/> top right<br/> top right<br/> top right<br/> top right<br/>top right<br/>top right<br/>top right<br/>
    </div>
    <div class="bottom">
      bottom right
    </div>
  </div>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

之所以发生这种情况，是因为您已向height div提供了固定的150px .top，因为它内部的内容不会自动调整大小

.top {
  background-color: lightblue;
  height: 150px;
}

要解决此问题，只需将height的值更改为auto，或者将其设为min-height 150px而不是固定的。{
} 像这样：

.top {
  background-color: lightblue;
  height: auto;
}

或者这个：

.top {
  background-color: lightblue;
  min-height: 150px;
}

Answer 3

此附件是显示您想要实现的内容的片段。然而，让左边的div与父母一起成长可能需要一些javascript （但这不是问题的一部分）。干杯

＆＃13;

＆＃13;

.left {
  background-color: grey;
  min-height: 200px;
  float: left;
}

.right {
  height: auto;
  float: left;
}

.top {
  background-color: lightblue;
  
  /* changes here */
  min-height: 150px;
  height: auto;
}

.bottom {
  background-color: lightgreen;
  height: 50px;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="right">
    <div class="top">
      top right<br/> top right<br/> top right<br/> top right<br/> top right<br/> top right<br/>top right<br/>top right<br/>top right<br/>

    </div>
    <div class="bottom">
      bottom right
    </div>

  </div>

  <div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您在ERROR: Vertex Shader Program Compilation Failed! Vertex shader failed to compile with the following errors: ERROR: 0:13: error(#160) Cannot convert from: "in highp 3-component vector of vec3" to: "default out highp 4-component vector of vec4" ERROR: error(#273) 1 compilation errors. No code generated div上的px中指定了高度。把它取出来，你的div会调整它的高度以适应它的内容

.top

＆＃13;

＆＃13;

.top {
  background-color: lightblue;
  }

＆＃13;

.left {
  background-color: grey;
  height: 200px;
  float: left;
}

.right {
  height: auto;
  float: left;
}

.top {
  background-color: lightblue;
}

.bottom {
  background-color: lightgreen;
  height: 50px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

我认为你想要一个固定的内容高度。

我在这里向你展示的片段作为另一种选择，要求你只在包装中设置高度，这样就更容易保持，右上角div需要它所需的高度，而右下角则适应父母的剩余高度< / p>

    html, body{
      height: 100%;
    }
    .wrapper {
      height: 200px;
    }
    .left {
      background-color: grey;
      float: left;
      height: 100%;
    }

    .right {
      height: auto;
      float: left;
      height: 100%;
    }

    .top {
      background-color: lightblue;
      height: 166px;
      
    }

    .bottom {
      background-color: lightgreen;
      height: calc(100% - 166px);
    }
    <div class="wrapper">
      <div class="left">
        left
      </div>
      <div class="right">
        <div class="top">
          top right<br/> top right<br/> top right<br/> top right<br/> top right<br/> top right<br/>top right<br/>top right<br/>top right<br/>

        </div>
        <div class="bottom">
          bottom right
        </div>

      </div>

      <div>