html - css - 给出完整的可用高度

Question

我有以下设置

HTML:

<div id="resizable">
    <div id="fixHeightTop">Whatever</div>
    <div id="problematicDiv">Whatever</div>
    <div id="semiProblematicDiv">Whatever</div>
    <div id="fixHeightBottom">Whatever</div>
</div>

CSS:

#resizable {
    position: relative;
}

#fixHeightTop {
    position: relative;
    height: 10px;
}

#fixHeightBottom {
    position: absolute;
    height: 10px;
}

#problematicDiv {
    position: relative;
    float: left;
    width: 80%;
    overflow: auto;
}

#semiProblematicDiv {
    position: relative;
    float: right;
    width: 20%;
    overflow: auto;
}

#resizable div 是可调整大小的 (jQuery)。我需要做的是给 problematicDiv 和 semiProblematicDiv 一个等于 100% - fixHeightTop height - fixHeightBottom height 的高度，这样我就可以在可调整大小的元素的整个高度上扩展它。问题是我想不出办法。如果我使用高度:100%，它会与底部元素重叠。

有什么办法吗？

Answer 1

如果我没理解错的话，您想要两个具有固定高度的 div，而另外两个 div show 占据剩余的高度。如果这是您想要的，这里有一种方法可以做到。

#resizable {
   height: 80px; //this is changed by JQuery, right?
}

#fixHeightTop {
   height: 20px;
}

#fixHeightBottom {
   height: 20px;
}

#problematicDiv {
   position: relative;
   float: left;
   width: 80%;
   overflow: auto;
   height: 100%; //this helps the div taking up the space
}

#semiProblematicDiv {
   position: relative;
   float: right;
   width: 20%;
   overflow: auto;
   height: 100%; //this helps the div taking up the space