HTML Flexbox布局

我正在尝试从以下位置更改布局：

我的代码结构如下所示：

因为你在我的第一个回答中的评论

当页面高于视口时，绿色div应该每次都具有完整的页面高度，如果没有，则只有视口
高度。因此，为了回答您的问题，它（蓝色div）应该随着
内容

如果不更改标记（至少使用
flex
），则无法解决此问题


更新

除了
flex
，并且为了不改变标记，我只找到了一种方法，即假设绿色div的内容永远不会超过视口或蓝色div（如果它高于视口）

我在这里使用的技巧是在蓝色div上使用一个伪元素，该元素从底部填充，使绿色div看起来一直延伸


html，正文{
保证金：0；
身高：100%；
}
div{
边框：4px实心；
框大小：边框框；
}
#绿色的{
浮动：左；
背景色：#ddd；
边框颜色：绿色；
边界底部：0；
宽度：150px；
最小高度：计算（100%-4px）；
最大高度：计算（100%-4px）；
}
#红色的{
浮动：对；
边框颜色：红色；
宽度：计算（100%-150px）；
高度：80px；
}
#蓝色的{
浮动：对；
边框颜色：蓝色；
宽度：计算（100%-150px）；
最小高度：计算（100%-80px）；
位置：相对位置；
}
#蓝色：之后{
内容：''；
位置：绝对位置；
右：计算（100%+4px）；
底部：-4px；
宽度：150px；
身高：100%；
边框：4倍纯绿；
背景色：#ddd；
边界顶部：0；
框大小：边框框；
z指数：-1；
}

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

标题
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

因为你在我的第一个回答中的评论

当页面高于视口时，绿色div应该每次都具有完整的页面高度，如果没有，则只有视口
高度。因此，为了回答您的问题，它（蓝色div）应该随着
内容

如果不更改标记（至少使用
flex
），则无法解决此问题


更新

除了
flex
，并且为了不改变标记，我只找到了一种方法，即假设绿色div的内容永远不会超过视口或蓝色div（如果它高于视口）

我在这里使用的技巧是在蓝色div上使用一个伪元素，该元素从底部填充，使绿色div看起来一直延伸


html，正文{
保证金：0；
身高：100%；
}
div{
边框：4px实心；
框大小：边框框；
}
#绿色的{
浮动：左；
背景色：#ddd；
边框颜色：绿色；
边界底部：0；
宽度：150px；
最小高度：计算（100%-4px）；
最大高度：计算（100%-4px）；
}
#红色的{
浮动：对；
边框颜色：红色；
宽度：计算（100%-150px）；
高度：80px；
}
#蓝色的{
浮动：对；
边框颜色：蓝色；
宽度：计算（100%-150px）；
最小高度：计算（100%-80px）；
位置：相对位置；
}
#蓝色：之后{
内容：''；
位置：绝对位置；
右：计算（100%+4px）；
底部：-4px；
宽度：150px；
身高：100%；
边框：4倍纯绿；
背景色：#ddd；
边界顶部：0；
框大小：边框框；
z指数：-1；
}

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

侧栏

标题
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

如果您的HTML结构太大，无法更改，这是您的第一个问题。解决这个问题，然后研究更改CSS


考虑到这一点，我的答案如下：

使用flexbox，即使不重新构造HTML（比如，围绕
#红色
和
#蓝色
的简单包装），也很难做你想做的事情，做你想做的事情。因此而不是使用flexbox。。。我曾经。。。绝对定位


html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
位置：相对位置；
}
div{
边框：4px实心；
框大小：边框框；
位置：绝对位置；
}
#绿色的{
边框颜色：绿色；
排名：0；
左：0；
底部：0；
宽度：30%；
}
#红色的{
边框颜色：红色；
身高：25%；
宽度：70%；
排名：0；
右：0；
}
#蓝色的{
边框颜色：蓝色；
身高：75%；
宽度：70%；
底部：0；
右：0；
}

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容
内容