Javascript 如何在div内达到100%的高度？ 蓝色分区上方的内容 我希望它与#a的高度一样高，如果更大，我希望得到滚动条 #a { 高度：100px； 背景颜色：黄色； } #b { 背景颜色：蓝色； }

小提琴：

---

蓝色div中的内容可以更长，我现在想和黄色div一样高。但是我不知道高度，因为有一个绿色的div，高度未知。

如果你添加几个包装器元素，你可以使用CSS表实现这个布局

如果您的内容变得很长（导致滚动条出现），您可能需要对此进行修改

#a{
高度：100px；
宽度：100%；
背景颜色：黄色；
显示：表格；
}
#b{
背景颜色：蓝色；
身高：100%；
}
#一排{
显示：表格行；
}
#一个div.row div{
显示：表格单元格；
}

蓝色div上方的内容
更多内容
我要这个和a一样高

如果更大，我想

滚动条

如果添加两个包装器元素，可以使用CSS表实现此布局

如果您的内容变得很长（导致滚动条出现），您可能需要对此进行修改

#a{
高度：100px；
宽度：100%；
背景颜色：黄色；
显示：表格；
}
#b{
背景颜色：蓝色；
身高：100%；
}
#一排{
显示：表格行；
}
#一个div.row div{
显示：表格单元格；
}

蓝色div上方的内容
更多内容
我要这个和a一样高

如果更大，我想

滚动条

使用flexbox的css应该可以做到这一点

<div id="a">
    <div style="background-color: green;">content above blue div</div>
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars</div>
</div>

#a
{
    height: 100px;
    background-color: yellow;
}

#b
{
    background-color: blue;
}

对HTML的修改很少：

#a
{
    height: 100px;
    background-color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */    

}

#c
{
    background-color: green;

}

#b
{
    background-color: blue;
    overflow: auto;
    flex: 1;
}

蓝色分区上方的内容
我希望它的高度与#a
一样高，如果更大，我希望得到
滚动条
滚动条
滚动条
滚动条
滚动条

阅读更多：

请看：

干杯

这个css，使用flexbox应该可以做到这一点

<div id="a">
    <div style="background-color: green;">content above blue div</div>
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars</div>
</div>

#a
{
    height: 100px;
    background-color: yellow;
}

#b
{
    background-color: blue;
}

对HTML的修改很少：

#a
{
    height: 100px;
    background-color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */    

}

#c
{
    background-color: green;

}

#b
{
    background-color: blue;
    overflow: auto;
    flex: 1;
}

蓝色分区上方的内容
我希望它的高度与#a
一样高，如果更大，我希望得到
滚动条
滚动条
滚动条
滚动条
滚动条

阅读更多：

请看：

---

干杯

#a

（100px）的高度是固定值吗？如果绿色分区和蓝色分区的高度加起来超过100px，您希望有一个滚动条吗？什么定义了绿色分区的高度？是各种高度的动态内容吗？@Mouser是的，也是动态内容。它甚至可能不会让人失望，否则我们可以在CSS中使用

calc

函数，@MarcAudet的答案很好，但在没有表格的情况下（即使在CSS中）会更好。

#a

（100px）的高度是固定值吗？如果绿色分区和蓝色分区的高度加起来超过100px，您希望有一个滚动条吗？什么定义了绿色分区的高度？是各种高度的动态内容吗？@Mouser是的，也是动态内容。它可能甚至不会让人失望，否则我们可以在CSS中使用

calc

函数，@MarcAudet的答案很好，但是在没有表格的情况下（即使在CSS中）做会更好。我喜欢你的答案是，它不需要额外的加分。唯一（暂时）的限制是flex不完全受支持，但这对OP来说可能不是问题。@MarcAudet Yes我一年前就应该使用表了。提出了几乎相同的解决方案。现在，如果我知道页脚或页眉的高度，我会使用

calc

。出色的功能。Flexbox是镇上的新成员，它的功能很好。我正在努力掌握它。OP的绿色div没有指定的高度，因此

calc

函数在这种情况下无法工作，非常不幸。是时候让我靠在flexbox上了！祝你一切顺利！我喜欢你的答案是它不需要额外加分。唯一（暂时）的限制是flex不完全受支持，但这对OP来说可能不是问题。@MarcAudet Yes我一年前就应该使用表了。提出了几乎相同的解决方案。现在，如果我知道页脚或页眉的高度，我会使用

calc

。出色的功能。Flexbox是镇上的新成员，它的功能很好。我正在努力掌握它。OP的绿色div没有指定的高度，因此

calc

函数在这种情况下无法工作，非常不幸。是时候让我靠在flexbox上了！祝你一切顺利！