Question

This fiddle说明了我希望拥有的布局。给我带来麻烦的部分是css

#A_2_1_1, #A_2_1_2 {
    float: left;
    width: 100%;
    height: 100px;
}

#A_2_1_3 {
    background: yellow;
    width: 100%;
    height: 100%;
}

#A_2_1_3_1 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

当#A_2_1_3_1是div时，就像在小提琴中一样，一切都很好：#A_2_1_3填充#A_2_1的剩余垂直空间，但不会溢出它。但是，当#A_2_1_3_1更改为textarea时，情况就不再如此：有溢出（请参阅fiddle with textarea）。

如何防止这种溢出发生？我希望这个textarea填充剩余的垂直空间。

Answer 1

在这种情况下，由于前两个div具有float个值，因此在显示第三个div时会忽略它们，因为它没有float。因此第三个div从顶部开始。但是textarea不是像div那样的容器元素，因此它从两个div结束的位置开始，并且因为它具有height: 100%，它具有与textarea相同的高度第三个div和包含div（第三个div）必须扩展以容纳top。

使用bottom和<div id="A"> <div id="A_1">This is the header content.</div> <div id="A_2"> <div id="A_2_1"> <div id="A_2_1_1" style="background-color: yellow;">This is other stuff.</div> <div id="A_2_1_2" style="background-color: yellow;">This is more stuff.</div> <div id="A_2_1_3" style="height: auto; bottom: 0; position: absolute; top: 200px;"> <textarea id="A_2_1_3_1" style="background-color: yellow;">Hi</textarea> </div> </div> </div> </div> css属性小提琴：http://jsfiddle.net/3Cwdr/

A_2_1_1

此解决方案认为A_2_1_2和div {{1}}具有固定的高度。

Textarea填充垂直空间

1 个答案: