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高度，这样我就可以在可调整大小的元素的整个高度上扩展它。问题是我无法找到办法。如果我使用高度：100％它会与底部元素重叠。

任何想法如何做到这一点？

Answer 1

如果我理解你的话，你想拥有两个固定高度的div，另外两个div显示其余的高度。如果这是你想要的，这是一种方法。

#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

}

Answer 2

我有个主意，尝试使用position:absolute;

#problematicDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80%;
  height: 100%; // Now you can apply height 100%
  overflow: auto;
}

#semiProblematicDiv {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20%;
  height: 100%; // Now you can apply height 100%
  overflow: auto;
}

祝你好运

css - 给出完整的可用高度

2 个答案: