0

我有以下设置

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）。我需要做的是给problemDiv 和semiProblematicDiv 一个等于100% 的高度——fixHeightTop 高度——fixHeightBottom 高度，这样我就可以在可调整大小的元素的整个高度上扩展它。问题是我想不出办法。如果我使用 height: 100% 它与底部元素重叠。

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

4

2 回答 2

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

}

于 2012-11-29T13:25:38.407 回答
0

我有一个想法，尝试使用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;
}

祝你好运

于 2012-11-29T13:21:23.717 回答