Jquery flexbox如何在保持高度的同时水平和垂直调整项目大小
我的问题是： 我在一个容器中有3个容器，其中的内容在这些容器中 我想让每一个容器都填满剩余的空间，如果垂直和水平移动其中一个的话 我将flexbox与flex-flow:row-wrap一起使用，如果我们删除两个底部容器中的一个，这将非常有效 然后，为了使它们垂直地重新调整大小，我使用height auto属性，可以预见，container元素将填充其容器的剩余高度Jquery flexbox如何在保持高度的同时水平和垂直调整项目大小,jquery,html,css,responsive-design,flexbox,Jquery,Html,Css,Responsive Design,Flexbox,我的问题是： 我在一个容器中有3个容器，其中的内容在这些容器中 我想让每一个容器都填满剩余的空间，如果垂直和水平移动其中一个的话 我将flexbox与flex-flow:row-wrap一起使用，如果我们删除两个底部容器中的一个，这将非常有效 然后，为了使它们垂直地重新调整大小，我使用height auto属性，可以预见，container元素将填充其容器的剩余高度 <!DOCTYPE html> <html> <head> <style>
<!DOCTYPE html>
<html>
<head>
<style>
div{border: 1px solid black}
html, body{height: 100%; width: 100%;}
#container1{
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
}
#subContainer3, #subContainer2{
flex: 1 49%;
}
#subContainer1{
flex: 1 100%;
}
.content{
background-color: lightgray;
height: 90%;
}
</style>
</head>
<body>
<div id="container1">
<div id="subContainer1">
<div class="content"></div>
</div>
<div id="subContainer2">
<div class="content"></div>
</div>
<div id="subContainer3">
<div class="content"></div>
</div>
</div>
</body>
</html>
div{边框：1px纯黑}
html，正文{高度：100%；宽度：100%；}
#集装箱1{
宽度：100%；
身高：100%；
显示器：flex；
柔性流：行换行；
}
#分包商3，#分包商2{
弹性：149%；
}
#分包商1{
弹性：1100%；
}
.内容{
背景颜色：浅灰色；
身高：90%；
}
作为补充说明，虽然这对某些人来说可能是显而易见的，但任何试图使用百分比高度的子div都无法识别flex box确定的任何高度。例如，如果我们的内容div的位置是他们自己的孩子想要达到他们父母的高度的%，那么我们必须在列方向上使用flex box来确定这一点，而不是%高度 尝试使用填充添加一些占位符高度和默认的
对齐项目：拉伸应保持内容
列的高度相等。
使用高度：90%在动态高度容器的子容器中没有意义
您可以找到一个很好的说明，说明带有%
值的高度何时起作用，何时不起作用。我还有一个答案，关于如何使高度与容器的宽度成比例，这可能是您设计的一个选项：
您需要在子容器2和3周围添加一个额外的包裹，并使用嵌套的flex。下面的示例演示了这一点
html，
身体{
身高：100%；
宽度：100%；
}
#集装箱1{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.水平{
显示器：flex；
柔性流：行换行；
弹性：10自动；
}
#分包商1，
#分包商2，
#分包商3{
弹性：10自动；
边框：1px纯黑；
}
.内容{
背景颜色：浅灰色；
}
您可以通过向Subcainer DIVs添加另一个flexbox来实现这一点：
div{边框：1px纯黑}
html，正文{高度：100%；宽度：100%；边距：0；填充：0}
#集装箱1{
宽度：计算（100%-4px）；
高度：计算（100%-4px）；
显示器：flex；
柔性流：行换行；
}
#分包商3，#分包商2{
弹性：149%；
显示器：flex；
柔性流：柱包裹；
}
#分包商1{
弹性：1100%；
显示器：flex；
柔性流：柱包裹；
}
.内容{
弹性：1100%；
背景颜色：浅灰色；
}
我认为高度：90%
在这里不起作用，因为最大的内容
决定了外部容器和弹性行的高度，你说的是高度：90%
本身？对不起，我知道90%的高度不起作用，我只是说明代码的问题。我想要一个解决方案，在这个解决方案中，我可以将高度保持在90%，同时可以使子容器div垂直扩展。一旦我为子容器设置了高度，内容高度（90%）就会起作用，但是如果我从tio中移除div，其余的div将不会扩展以填充高度。因此.content
？并且您希望内容
与子容器中的其他项目成比例增加（高度的9倍）
？您想要的设计不清楚=/如果我将高度设置为子容器的div，则它们不会像移除子容器时在水平方向上那样在垂直方向上灵活扩展。例如，如果删除Subcainer1，则其他两个Subcainer不会填满整个页面。这就是问题的本质对不起，我编辑了答案我想它会满足你现在的要求