Html 根据需要做一个尽可能高的俯冲

在我下面的示例中，当右上角

div

中的内容过高时，底部

div

的内容会溢出顶部

div

的内容

我希望顶部的

div

向下推动底部的

div

，以便在下面的情况下

div

s中的内容保持可见

我怎样才能解决这个问题？

。左{
背景颜色：灰色；
最小高度：200px；
浮动：左；
}
.对{
高度：自动；
浮动：左；
}
.顶{
背景颜色：浅蓝色；
高度：150像素；
}
.底部{
背景颜色：浅绿色；
高度：50px；
}

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角

这里附上一个片段，展示您想要实现的目标。然而，让左div与父div一起增长可能需要一点javascript（但这不是问题的一部分）。干杯

。左{
背景颜色：灰色；
最小高度：200px；
浮动：左；
}
.对{
高度：自动；
浮动：左；
}
.顶{
背景颜色：浅蓝色；
/*这里的变化*/
最小高度：150px；
高度：自动；
}
.底部{
背景颜色：浅绿色；
高度：50px；
}

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角

这里附上一个片段，展示您想要实现的目标。然而，让左div与父div一起增长可能需要一点javascript（但这不是问题的一部分）。干杯

。左{
背景颜色：灰色；
最小高度：200px；
浮动：左；
}
.对{
高度：自动；
浮动：左；
}
.顶{
背景颜色：浅蓝色；
/*这里的变化*/
最小高度：150px；
高度：自动；
}
.底部{
背景颜色：浅绿色；
高度：50px；
}

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角

您在

.top

div上有一个px指定的高度。取出这个，您的div将调整其高度以适应其内容

.top {
  background-color: lightblue;
  }

。左{
背景颜色：灰色；
高度：200px；
浮动：左；
}
.对{
高度：自动；
浮动：左；
}
.顶{
背景颜色：浅蓝色；
}
.底部{
背景颜色：浅绿色；
高度：50px；
}

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角

您在

.top

div上有一个px指定的高度。取出这个，您的div将调整其高度以适应其内容

.top {
  background-color: lightblue;
  }

。左{
背景颜色：灰色；
高度：200px；
浮动：左；
}
.对{
高度：自动；
浮动：左；
}
.顶{
背景颜色：浅蓝色；
}
.底部{
背景颜色：浅绿色；
高度：50px；
}

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角

我假设您希望内容有一个固定的高度

我在这里向您展示的代码片段要求您仅在包装器中设置高度，以便更容易维护，右上角的div获取所需的高度，右下角的adaptes获取父级的剩余高度

    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获取所需的高度，右下角的adaptes获取父级的剩余高度



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

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角
您可以使用外部元素的flex
行
布局和右侧的
列
布局来完成此操作。将
.top
和
.bottom
设置为
flex grow:1
将使它们在没有足够的内容可拉伸到父级高度的情况下增长以匹配父级高度


。左{
背景颜色：灰色；
最小高度：200px；
}
.顶{
背景颜色：浅蓝色；
}
.底部{
背景颜色：浅绿色；
}
/*加上这些*/
.flex{
显示器：flex；
}
上校{
弯曲方向：立柱；
}
.顶部，.底部{
柔性生长：1；
}

左边
右上
右上
右上
右上
右上
右上
右上
右上
右上

右下角
您可以使用外部元素的flex
行
布局和右侧的
列
布局来完成此操作。将
.top
和
.bottom
设置为
flex grow:1
将使它们在没有足够的内容可拉伸到父级高度的情况下增长以匹配父级高度


。左{
背景颜色：灰色；
最小高度：200px；
}
.顶{
背景颜色：浅蓝色；
}
.底部{
背景颜色：浅绿色；
}
/*加上这些*/
.flex{
显示器：flex；
}
上校{
弯曲方向：立柱；
}
顶部
.top {
  background-color: lightblue;
  min-height: 150px;
}